LESS：与非类规则集混合

【问题标题】：LESS: mixin with non-class rulesetLESS：与非类规则集混合
【发布时间】：2013-06-05 22:26:35
【问题描述】：

在 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：

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

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

【问题讨论】：

标签： css less

【解决方案1】：

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

您可以通过将 .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
}

【讨论】：