可变混合名称较少吗？

Question

我要做的是创建一个参数，并使用一个或多个参数作为包含其他混合蛋白的名称。

由于我不确定适当的术语，我将尝试通过示例来解释：

@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不应以 @开始，该 @定义一个变量。混音基本上只是一堂课。

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

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

然后，当您想在另一个定义中使用Mixin时，就会如此：

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

因此，在您使用的Mixin时，您可以保留默认值或传递新值（即：@light＆150）

希望有帮助！