4

我会用一个例子来解释。

想象一下以下 CSS 规则

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

现在，假设您要创建一个等效于使用 LESS 的类.parent和另一个等效于.child使用 LESS 的类。

如果您使用“扩展”，您可以实现部分目标：

.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 并且想要为他的类使用其他名称的人可能会有所帮助（以从框架中实现更大的抽象）。例如，假设您想更改 and 的名称.input-append，.add-on您需要扩展与这两个类相关的所有选择器，包括它们都出现的选择器（如.input-append .add-on { ... }）。

提前致谢！

4

1 回答 1

6

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

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

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

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

我不完全确定您希望您的 CSS 输出看起来有多精确，但您始终可以扩展“关系”/combined/nested 选择器并避免该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 {
  color: blue;
}
.child,
.newChild {
  color: red;
}
.parent .child,
.newParent .newChild {
  color: white;
}

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

.parent,
.newParent {
  color: blue;
}
.child,
.newChild {
  color: red;
}
.parent .child,
.parent .newChild,
.newParent .child,
.newParent .newChild {
  color: white;
}
于 2013-08-09T11:06:37.273 回答