LESS中的可变混合名称是否可行? [英] are variable mixin names in LESS possible?

问题描述

我想要做的是创建一个混合器，该混合器接受参数并使用一个或多个参数作为要包含的其他混合器的名称.

What I want to do is to create a mixin that takes arguments and uses one or more of the arguments as names for other mixins to be included.

由于我不确定适当的用语，我将尝试通过示例进行解释:

as I'm not sure about the proper terms, I'll try to explain through example:

@gradients{
    light:#fafafa; //Should these also be prefixed with @?
    dark:#888888;
}
@gradientBackground(@name,@height){
    background-image:url('../img/gradients/{@name}-{@height}.png'); //this works
    background-color:@gradients[@name];
}

.someBox{
    @gradientBackground(light;150);
}

//Expected result:
.someBox{
    background-image:url('../img/gradients/light-150.png'); //This works
    background-color:#fafafa; //This doesn't work.
}

图像有效，但是我还没有弄清楚如何从@gradients引用适当的颜色.这有可能吗?

The image works but I haven't yet figured out how to reference the appropriate color from @gradients. Is this possible at all?

推荐答案

我认为您根本不需要@gradients变量.只需定义变量即可:

I don't think you'd need @gradients variable at all. Just define your variables:

@light:#fafafa;
@dark:#888888;

您的mixin不应以@开头，后者定义了一个变量.基本上，mixin只是一类.

Your mixin should not start with @, that defines a variable. A mixin is basically just a class.

.gradientBackground(@name:@dark, @height:500){
    background-image:url('../img/gradients/{@name}-{@height}.png');
    background-color:@name;
}

仅作为示例，我将mixin的属性设置为@dark颜色，将高度的属性设置为500.

Just as an example I set the attributes for the mixin to be the @dark color and 500 for the height.

然后，当您想在其他定义中使用mixin时，会像这样:

Then when you want to use your mixin in another definition it would be like so:

.somebox {
    .gradientBackground(@light, 150);
}

因此，在此时您正在使用mixin，您既可以保留默认值，也可以传递新值(即:@light& 150)

So at the point were you are using the mixin you can either keep the default values or pass new ones (ie: @light & 150)

希望有帮助！

这篇关于LESS中的可变混合名称是否可行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！