3

我想使用 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 中正确地做到这一点。另外，我不希望.selected-dropdown-valuesmixin 在 CSS 中输出。

4

1 回答 1

2

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

因此，最好的方法是执行以下操作：

较少的：

.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;
}
于 2014-09-05T07:03:14.040 回答