css - LESS:与非类规则集混合

Question

在 LESS 中，我试图定义 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 :

Any CSS class or id ruleset can be mixed-in that way.

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

Answer 1

限制可能只是易于解析，因为 . 或 # 不会显示为普通样式规则的第一个字符，解析器会自动知道这些应该混合进去。

您可以通过将.c1定义为mixin并将其用于两个按钮来解决这个问题:

.c1() {
    // c1 rules
}

button.c1 {
    .c1;
}

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

但是，LESS 1.4.0 中出现了 :extend 选择器，它将允许您做您想做的事情。语法为:

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