当另一个变量为 true 时，LESS CSS 定义变量

Question

我在 CSS 中的其他地方使用了保护表达式来实现 LESS 中的 IF 语句，但是当我尝试像这样声明变量时，这些对我不起作用......

@neutral: false;
@warm: true;

when (@neutral = true) {
    @green: #91C95B;
    @red: #F15647;
    etc...
}
when (@warm = true) {
    @green: #91AD3C;
    @red: #BF2A23;
    etc...
}

这是我希望如何使用该变量的示例

h1 {
    color:@green;
}

这就是我期望它编译为 CSS 的方式

h1 {
    color: #91AD3C;
}

这可以用 LESS 实现吗？还是我需要修改我的代码才能使用 mixin 防护？

Answer 1

Guarded Mixins你可以这样使用：

@neutral: false;
@warm: true;

.color() when (@neutral) {
    @green: #91C95B;
}
.color() when (@warm) {
    @green: #91AD3C;
}
.color();


h1 {
    color:@green;
}