LESS：mixin与非类规则集

Question

在我看来，我正在尝试定义要应用于button.c2元素的<button class="c2">...</button>规则集。此规则集主要基于button.c1规则集。但是，以下代码会产生ParseError：

button.c2 {
  button.c1;// Trying to import a ruleset
  ... // additional rules, such as font-size: 120%;
}

在我看来，ParseError是由导入的规则集不引用类或ID（“button.c1”不以“。”或“＃”开头）引起的。来自LESS documentation：

  

任何CSS类或id规则集都可以这样混合。

为什么会有这样的限制？它有什么办法吗？

Answer 1

该限制可能只是易于解析，因为.或#没有显示为普通样式规则的第一个字符，解析器会自动知道那些应该混合在一起。< / p>

您可以通过将.c1定义为mixin并将其用于button s来解决问题：

.c1() {
    // c1 rules
}

button.c1 {
    .c1;
}

button.c2 {
    .c1;
    // additional rules
}

然而，在LESS 1.4.0中出现的是:extend选择器，将允许您按照自己的意愿行事。语法如下：

button.c2:extend(button.c1) {
    // additional rules
}