Less Mixin以不同的方式处理2个相等的类定义

我从一个简单的例子开始：

.classA {
  color: red;
  .otherClass {
       color: yellow;
  }
}
.classB {
  .classA;
}

结果：

.classA {
  color: red;
}
.classA .otherClass {
  color: yellow;
}
.classB {
  color: red;
}
.classB .otherClass {
  color: yellow;
}

.classA {
  color: red;
}
.class A .otherClass {
  color: yellow;
}
.classB {
  color: red;
}

但是：

结果：

.classA {
  color: red;
}
.classA .otherClass {
  color: yellow;
}
.classB {
  color: red;
}
.classB .otherClass {
  color: yellow;
}

.classA {
  color: red;
}
.class A .otherClass {
  color: yellow;
}
.classB {
  color: red;
}

我不明白为什么编译器不在

.classB

中包含

.otherClass

。我的意思是，两个

classA

定义是相等的，不是吗

这种奇怪的行为有没有简单的解释？ 特别是，有没有办法通过mixin包含

.otherClass

，或者我必须复制代码

我的意思是两个classA的定义是相等的，不是吗

不，它们确实创建了相同的CSS选择器/规则集，但它们的较少定义恰恰是不同的（事实上，第一个代码段中少了一个规则集定义，第二个代码段中有两个独立的规则集定义）

换言之： Mixins工具不能以类似HTML的方式使用选择器（是的，一开始这可能会令人惊讶）。mixin使用规则集及其扩展规则，因此mixin扩展规则非常简单：

.foo

将仅匹配

.foo

规则集（并仅展开该

.foo

中定义的所有代码）

因此，任何单独定义的

.foo.bar

等规则集都不会涉及

.foo

调用。（是的，CSS选择器的最终结果并不重要。唯一的例外是，这是另一个我不想让你混淆的大故事）

---

对于您的特定示例，我想说这将更适合。

我不是一个不那么专业的人，但我在这里看到的正是我所期望的。在第一种情况下，

.classB

引用了

.classA

选择器，该选择器中有

.otherClass

，因此它将被扩展以供classB使用。在第二种情况下，它引用类

.classA

选择器，该选择器没有。其中的otherClass（

.classA.otherClass

是一个不同的选择器），因此它不会被扩展。对于这样的代码，这通常很有用（因此从最早的步骤开始，您不会过多地使用此类代码）。