如何在 LESS 中通过引用调用 mixin？答案

【问题标题】：How can I call a mixin by reference in LESS?如何在 LESS 中通过引用调用 mixin？
【发布时间】：2013-05-06 13:09:12
【问题描述】：

合乎逻辑的方式是：

.mymixin() {
  sample_key: samplevalue;
}

@avar:  mymixin;
.@{avar}();

但我得到一个解析错误。

有办法吗？

【问题讨论】：

【解决方案1】：

模块混合

如果你想通过一个变量的引用来调用一个特定的 mixin，你需要使用一个参数，因为你不能通过它们的名字动态地调用参数 mixin。因此，最接近您想要做的是使用模块 mixins。

在 LESS 中看起来像这样：

.mixin(mymixin) {
  sample_key:samplevalue;
}

.mixin(anothermixin) {
  another_key:anothervalue;
}

@avar: mymixin;
.mixin(@avar);

输出 CSS 将如预期的那样：

sample_key: samplevalue;

如果您将@avar 更改为anothermixin，您将专门调用第二个mixin。

这使得@ScottS 很好地使用了这种方法： LESS CSS Pass mixin as a parameter to another mixin

进一步阐述答案。 为什么你的方法行不通？问题在于选择器/规则插值，其中行需要具有以下结构：

.prefix-satring-@{classname} some-more-string { property:value; }

因此您不能使用它调用 mixin，因为它期望在选择器名称后有一个 {，并且在规则插值中不接受未转义的 ( 作为有效语法。

其他信息：

同样，您不能在 LESS 中动态生成属性名称。所以你不能做任何像.myclass{-webkit-@{property}:value;} 这样的事情，这在Sass（另一种非常流行的预处理器语言）中是可能的。但是，that 有一些解决方法。

另一个问题，这可能是这里的概念是插值类（例如.@{avar}{something:something;}）直接呈现到 CSS 中并且不作为 LESS 对象/混合存在，你可以 reuse。

【讨论】：