LESS 中的变量混合名称是否可能？答案

【问题标题】：are variable mixin names in LESS possible?LESS 中的变量混合名称是否可能？
【发布时间】：2010-11-10 17:26:51
【问题描述】：

我想做的是创建一个 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 引用适当的颜色。这可能吗？

【问题讨论】：

你不能改用@dark_gradient 和@light_gradient 吗？
我可以并且最终做到了，但我一直在寻找更优雅的解决方案。我可以将它与 php 或任何其他语言中的数组进行比较。如果您有很多颜色要存储，您更愿意拥有一个可以作为一个组轻松访问并且代码干净的单个数组还是每种颜色的不同变量？ :)

标签： less less-mixins

【解决方案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);
}

因此，如果您正在使用 mixin，您可以保留默认值或传递新值（即：@light & 150）

希望有帮助！

【讨论】：

我最终决定这样做。我问，因为 LessPhp 文档 (bit.ly/8kBTyS) 有点不清楚，当时没有更好的例子。所以这更像是一个“我可以做这个”类型的问题:) 我的主要目标是通过在他们自己的 mixin 组中包含颜色和主题相关的变量来使代码更干净，这样就可以使用通用名称访问它们，但我想这毕竟是不可能的。