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

问题描述

逻辑方法是:

.mymixin() {
  sample_key: samplevalue;
}

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

但是我遇到了解析错误.

but I get a parse error.

有办法吗?

推荐答案

模块mixins

如果要通过变量的引用来调用特定的混合，则需要使用参数，因为您无法动态地通过参数的名称来调用参数混合..因此，最接近您要执行的操作的将是使用模块mixins.

Module mixins

If you want to call a specific mixin by a reference from a variable you would need to use a parameter, as you can not dynamicaly call parametric mixins by their names. So, the closest to what you want to do, would be using module mixins.

在少中看起来像这样:

.mixin(mymixin) {
  sample_key:samplevalue;
}

.mixin(anothermixin) {
  another_key:anothervalue;
}

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

输出 CSS 将符合预期:

sample_key: samplevalue;

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

and if you would change @avar to anothermixin you would specifically call the second mixin.

这里使@ScottS很好地使用了这种方法: 将CSS的mixin作为另一个混入的参数

Here makes @ScottS a great use of this approach:LESS CSS Pass mixin as a parameter to another mixin

进一步详细说明答案. 为什么您的方法行不通? 问题出在选择器/规则插值中，该行需要具有以下结构:

To elaborate the answer a bit further. Why your approach wouldn't work? The problem is in selector/rule interpolation, where the line needs to have the following structure:

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

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

so you can not call a mixin with it as it expects a { after the selector name and also an unescaped ( is not accepted as valid syntax in rule interpolation.

其他信息:

类似地，您不能在LESS中动态生成属性名称.因此，您无法执行.myclass{-webkit-@{property}:value;}之类的操作，而在 Sass (另一种非常流行的预处理器语言)中是可以做到的. ).但是，有一些解决方法

Similarly, you can not dynamically generate property names in LESS. So you can not do anything like .myclass{-webkit-@{property}:value;}, where this is possible in Sass (another very popular preprocessor language). However, there are some workarounds for that.

另一个问题，在这里可能是个概念，即内插的类(例如.@{avar}{something:something;})直接呈现到CSS中，并且不以LESS对象/mixins的形式存在，您可以.

Another issue, that might be of notion here is that the interpolated classes (e.g. .@{avar}{something:something;}) get directly rendered into CSS and do not exist as LESS object/mixins, that you could reuse.

这篇关于如何在LESS中通过引用调用mixin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！