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

Question

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

.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 {
  .classA;
}

结果是：

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

我不明白为什么编译器不包含.otherClassin .classB。我的意思是两个classA定义是相等的，不是吗？

对奇怪的行为有简单的解释吗？特别是，有没有办法.otherClass通过 mixins 包含或者我必须复制代码？

score 1 · Accepted Answer

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

不，它们确实创建了相同的 CSS 选择器/规则集，但它们的Less 定义完全不同（实际上它是第一个片段中的一个 Less 规则集定义，第二个片段中有两个独立的规则集定义）。

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

.foo将仅匹配.foo规则集（并仅扩展其中定义的所有代码.foo）

因此任何单独定义.foo .bar的规则集都不会参与.foo调用。（是的，CSS 选择器最终的结果并不重要。唯一的例外是namespaces，但这是另一个我不想让你混淆的大故事）。

对于您的特定示例，我会说这extend会更好。

1 回答 1