在 Mixin 上使用变量或在 Less.js 中扩展答案

【问题标题】：use variables on mixin or extend in Less.js在 Mixin 上使用变量或在 Less.js 中扩展
【发布时间】：2016-04-23 13:52:23
【问题描述】：

在Less.js 中使用mixin 或extend 上的变量如下将引发错误。

@bar : bar;

.@{bar} {
  background: yellow;
}

// ParseError: Missing closing ')'
.foo {
  .@{bar}(); 
}

// Not work
.jam {
  &:extend(.@{bar});
}

Less.js 是否有正确的语法来调用带有变量的 mixin？

【问题讨论】：

简而言之，没有。 extend 的相应功能在 #1485 提出。
至于 mixins - 由于各种原因，现在不建议将现有的 CSS 规则集重新用作 mixins，因此没有计划此功能（尽管其他添加可能会间接支持它）。因此，对于您的用例，您可能最好从 like this 开始。

标签： css less

【解决方案1】：

您正在尝试使用选择器插值调用 mixin，which is not possible。

至于扩展，更少的文档states it clearly：

Extend 无法将选择器与变量匹配。如果 selector 包含变量，extend 将忽略它。

【讨论】：