Twitter bootstrap 更少：当两个类之间存在关系时，如何完全扩展它们

我将用一个例子来解释

想象一下下面的CSS规则

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

现在，假设您想要创建一个等价于

.parent

的类，另一个等价于

.child

的类，使用更少的代码

如果使用“扩展”，则实现了部分目标：

.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

有没有一种方法可以实现这种完全对等

注意：这可能对使用引导程序的人以及希望为其类使用其他名称的人有所帮助（以便从框架中实现更大的抽象）。例如，假设您要更改

.input append

和

.add-on

的名称，您需要扩展与这两个类相关的所有选择器，包括它们都出现在其中的选择器（如

.input append.add-on{…}

）

---

提前谢谢

所有

all

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

因此，在使用

.newParent

扩展

.parent

时，在嵌套选择器

.parent.child

中，它将使用

.newParent.child

扩展嵌套选择器，因为已定义了与

.child

的关系。使用

.newChild

扩展

.child

时，嵌套选择器将通过

.parent.newChild

进行扩展，因为

.child

和

.parent

之间存在关系。最后你会得到这个CSS：

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

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

注意：这不会基于使用扩展创建的嵌套选择器创建选择器。在扩展之前，既没有

.newParent.child

的定义，也没有

.parent.newChild

的定义，这可能导致在规则扩展之后创建

.newParent.newChild

我不完全确定您希望CSS输出看起来有多精确，但您也可以扩展“关系”/“组合/嵌套选择器”，避免使用

all

选项，这样您就不会生成所有混合选择器（如

.parent.newChild

和

.newParent-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

选项简单地添加所有嵌套选择器组合sh。这将获得选择器的所有排列，并获取此CSS：

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

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

---

谢谢那很有魅力。还有很好的解释

.newParent.newChild{&:extend（.parent.child）；}

起作用。我不知道为什么我第一次没有尝试。也许是我做的，但不正确。在LESS的文档中有这样一个例子会很好。