less - 如何在 LESS 中通过引用调用 mixin？

Question

合乎逻辑的方法是：

.mymixin() {
  sample_key: samplevalue;
}

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

但我得到一个解析错误。

有没有办法做到这一点？

Answer 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 作为参数到另一个 mixin

编辑：

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

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

所以你不能用它调用mixin，因为它期望{在选择器名称之后有a，并且在规则插值中，未转义(的语法不被接受为有效语法。

附加信息：

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

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