代码之家 › 专栏 › 技术社区 › jpeltoniemi

变量混合名不太可能吗?

less-mixins less

1

jpeltoniemi · 技术社区 · 15 年前

由于我不确定合适的术语,我将尝试通过示例解释:

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

1 回复 | 直到 11 年前

1

2

Jonathan Miller 15 年前

我认为你根本不需要@gradients变量。只需定义变量:

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

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

作为一个例子,我将MIXIN的属性设置为@暗颜色,500为高度。

然后,当你想在另一个定义中使用你的MIXIN时,它会是这样的:

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

所以,你使用MIXIN的时候,你可以保留默认值或者通过新的值(即:@ LAMP和150)。

希望能有帮助!