无法扩展Less mixin

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中正确地实现它。另外，我不希望.selected-dropdown-values mixin输出CSS。

- khagesh

---

请在jsfiddle中分享您的问题。 - Archana

目前您无法扩展mixin。您需要在第一条规则中删除()。或者，如果您不希望.selected-dropdown-values出现在输出中，则可能需要将这些属性放到基类中。 - Harry

@Archana 抱歉，我不知道任何 LESS fiddle。如果你能指引我到这样的地方，那就太棒了，我可以设置一个 LESS fiddle。 - khagesh

@Harry，请问你能给我展示一些基类的例子吗？我很想了解更多关于它的知识。 - khagesh

据我所知，JSfiddle不支持Less（除非作为外部资源包含）。CodePen和CSSDeck提供Less支持，但对于这个特定的问题，我认为不需要演示。 - Harry

Answer 1

如在评论中提到并在聊天中讨论，目前Less不支持扩展mixin（有一个请求，可能在v2.0.0或以后得到解决）。(注意: 为了使用更精确的措辞，不支持扩展不会输出CSS的mixin。)

所以，最好的方式是进行以下操作:

Less:

.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;
}

- Harry

---

感谢@Harry，我想我不得不在那行额外的代码上做出妥协。 :) - khagesh