Question

我想使用Less

获得CSS输出

.selected-values,
.selected-values a {
    background-color: #505050;
    color: #fff;
}

.selected-values {
    display: block;
}

.selected-values a {
    text-decoration: none;
}

到目前为止，我已经考虑过以下Less语法，但它无效。

.selected-dropdown-values() {
    background-color: #505050;
    color: #fff;
}

.selected-values:extend(.selected-dropdown-values) {
    display: block;
}

.selected-values a:extend(.selected-dropdown-values) {
    text-decoration: none;
}

我无法应用任何extend逻辑来生成此语法。我可能会遗漏一些东西，或者我不知道如何在Less中正确地做到这一点。另外，我不希望在CSS中输出.selected-dropdown-values mixin。

Answer 1

正如评论中所述并在聊天中讨论过，Less目前不支持扩展mixins（有一个请求，它可能会在v2.0.0或更高版本中得到解决）。（注意：为了更精确地使用措辞，不支持扩展CSS中未输出的mixins。）

所以，最好的方法是做到以下几点：

<强>减：

.selected-dropdown-values { // just remove the braces
    background-color: #505050;
    color: #fff;
}

只需从.selected-dropdown-values规则中删除大括号即可。当然，这会导致该规则也出现在CSS输出中，但鉴于我们使用的是extend，它只意味着CSS输出中只有一行。

<强>输出：

.selected-dropdown-values,
.selected-values,
.selected-values a {
    background-color: #505050;
    color: #fff;
}

无法扩展Less mixin

1 个答案: