less - LESS 中的变量混合名称是否可能？

Question

我想要做的是创建一个 mixin，它接受参数并使用一个或多个参数作为要包含的其他 mixin 的名称。

由于我不确定正确的术语，我将尝试通过示例进行解释：

@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. 这可能吗？

Answer 1

我认为您根本不需要 @gradients 变量。只需定义您的变量：

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

你的 mixin 不应该以 @ 开头，它定义了一个变量。mixin 基本上只是一个类。

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

举个例子，我将 mixin 的属性设置为 @dark 颜色，将高度设置为 500。

然后当你想在另一个定义中使用你的 mixin 时，它会是这样的：

.somebox {
    .gradientBackground(@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)

Hope that helps!