css - 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 是否可行，或者我是否需要修改我的代码以使用混合守卫？

Answer 1

您可以像这样使用Guarded Mixins:

@neutral: false;
@warm: true;

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


h1 {
    color:@green;
}