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;
}

我无法弄清楚编译器在.otherClass中不包含.classB的原因。我的意思是classA两个.otherClass定义相同，不是吗？

是否有一个简单的解释奇怪的行为？特别是，有没有办法通过mixins包含function calculate(elementID) { var mainRow = document.getElementById(elementID); var num1 = mainRow.querySelectorAll('[name=num1]')[0].value; var num2 = mainRow.querySelectorAll('[name=num2]')[0].value; var result = mainRow.querySelectorAll('[name=result]')[0]; var result1 = num2 - num1; result.value = result1; if(result1 < 0){ $(result).parent().css("background", "red"); }else{ $(result).parent().css("background", ""); } }，还是我必须复制代码？

Answer 1

我的意思是这两个classA定义相同不是吗？

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

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

.foo仅匹配.foo规则集 （并展开仅.foo内定义的所有代码）

因此任何单独定义的.foo .bar等规则集都不会涉及.foo次调用。（是的，它实际上并不重要的是CSS选择器的结果到底是什么。唯一的例外是namespaces，但这是另一个我不想让你迷惑的大故事）。

对于您的特定示例，我会说extend会更合适。

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

1 个答案: