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 文档中：

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

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

score 4 · Accepted Answer

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

您可以通过定义.c1为 mixin 并将其用于两个buttons 来解决它：

.c1() {
    // c1 rules
}

button.c1 {
    .c1;
}

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

然而，在 LESS 1.4.0 中出现的是:extend选择器，它可以让你做你想做的事。语法是：

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

1 回答 1