Question

逻辑方式是：

.mymixin() {
  sample_key: samplevalue;
}

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

但我得到一个解析错误。

有办法吗？

Answer 1

模块mixins

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

在 LESS ：

中看起来像这样

.mixin(mymixin) {
  sample_key:samplevalue;
}

.mixin(anothermixin) {
  another_key:anothervalue;
}

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

输出 CSS 将符合预期：

sample_key: samplevalue;

如果您将@avar更改为anothermixin，则会专门调用第二个混音。

这使得@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 object / mixins，你可以reuse。< / p>

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

1 个答案:

模块mixins

编辑：