无法扩展 Less mixin答案

【问题标题】：Not able to extend Less mixin无法扩展 Less mixin
【发布时间】：2014-10-30 00:35:53
【问题描述】：

我希望使用 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 中输出。

【问题讨论】：

请在 jsfiddle 中分享您的问题
目前你不能扩展 mixins。您必须删除第一条规则中的 ()。或者，如果您不希望 .selected-dropdown-values 出现在输出中，那么您可能必须将这些属性放入基类本身。
@Arcana 对不起，但我不知道任何 LESS 小提琴。如果你能把我指向那样的地方，那就太棒了，我可以设置一个 LESS fiddle。
@Harry，你能给我看一些基类的例子吗？我很乐意了解更多。
@khagesh：据我所知，JSfiddle 不支持 Less（除非作为外部资源包含在内）。 CodePen 和 CSSDeck 确实提供了 Less 支持，但对于这个特殊问题，我认为不需要演示。

标签： css less mixins less-mixins

【解决方案1】：

正如 cmets 中提到的和聊天中所讨论的，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;
}

【讨论】：

谢谢@Harry，我想我不得不在额外的行上妥协。 :)