twitter-bootstrap – LESS：当两个类之间存在关系时,如何完全扩

发布时间：2020-12-17 21:32:13 所属栏目：安全来源：网络整理

导读：我将用一个例子来解释. 想象一下以下的CSS规则 .parent { color: blue;}.child { color: red;}.parent .child { color: white;} 现在,假设您想要创建一个等效于.parent的类,并使用LESS创建另一个等效于.child的类. 如果您使用“extend”,您将实现目标的一部

我将用一个例子来解释.

想象一下以下的CSS规则

.parent {
  color: blue;
}
.child {
  color: red;
}
.parent .child {
  color: white;
}

现在,假设您想要创建一个等效于.parent的类,并使用LESS创建另一个等效于.child的类.

如果您使用“extend”,您将实现目标的一部分：

.newParent {
  &:extend(.parent all);
}
.newChild {
  &:extend(.child all);
}

将呈现：

.parent,.newParent {
  color: blue;
}
.child,.newChild {
  color: red;
}
.parent .child,.newParent .child,.parent .newChild {
  color: white;
}

这使得你的新课程几乎等同于你的旧课程.

缺少的是最后一组规则中的.newParent .newClass.

有没有办法实现这种完全等价？

注意：这对于使用Bootstrap并希望为其类使用其他名称的人(从框架中实现更大的抽象)有所帮助.例如,假设您要更改.input-append和.add-on的名称,为此您需要扩展与这两个类相关的所有选择器,包括出现这两个类的选择器(如.input-append) .添加在 { … }).

提前致谢！

解决方法

all选项将新选择器添加到已存在的所有层次关系/嵌套选择器中.

因此,在嵌套选择器.parent .child中使用.newParent扩展.parent时,它将使用.newParent .child扩展嵌套选择器,因为已经定义了与.child的这种关系.当使用.newChild扩展.child时,嵌套选择器会被.parent .newChild扩展,因为.child和.parent之间的关系存在.你最终得到这个CSS：

.parent .child,.parent .newChild {
  color: white;
}

注意：这不会基于使用扩展名创建的嵌套选择器创建选择器.在扩展之前既没有.newParent .child的定义也没有.parent .newChild之一,这可能导致在规则扩展之后创建.newParent .newChild.

我不完全确定你希望你的CSS输出看起来多么精确,但是你总是可以扩展“关系”/组合/嵌套选择器并避免使用all选项,这样你就不会生成所有混合选择器(像.parent .newChild和.newParent child)：

.newParent {
  &:extend(.parent);
}
.newChild {
  &:extend(.child);
}
.newParent .newChild {
  &:extend(.parent .child);
}

或以嵌套形式：

.newChild {
  &:extend(.child);
}
.newParent {
   &:extend(.parent);
   .newChild {
      &:extend(.parent .child);
   }
}

并且CSS输出将是：

.parent,.newParent .newChild {
  color: white;
}

如果需要,您现在可以通过添加all选项简单地添加所有嵌套选择器组合.这将为您提供选择器的所有排列,并获得此CSS：

.parent,.parent .newChild,.newParent .newChild {
  color: white;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!