如何在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将mixin作为另一个mixin的参数

编辑:

详细说明答案.为什么你的方法不起作用？问题出在选择器/规则插值中,其中行需要具有以下结构:

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

所以你不能用它调用mixin,因为它期望{在选择器名称之后,并且(在规则插值中不接受非转义作为有效语法.

附加信息:

同样,您无法在LESS中动态生成属性名称.所以,你不能做任何事情一样.myclass{-webkit-@{property}:value;},在这里,这是可能的萨斯(另一种非常流行的预处理语言).然而,也有一些变通办法说.

这里可能存在的另一个问题是内插类(例如.@{avar}{something:something;})直接呈现到CSS中并且不作为LESS对象/ mixins存在,您可以重用它.