有条件地根据另一个变量设置一个变量的值

Question

我有一个名为Less变量的变量@side.我想要的是@sideOpposite根据变量的值设置@side变量.它只需要两个值:"left"或"right".

换句话说,我需要一个相当于JS代码的Less:

var side = "left",
    sideOpposite = (side === "left")? "right" : "left";

我试图使用when函数完成此操作,但据我所知,它不能以这种方式工作,只适用于CSS属性,而不适用于变量:

when (@side = right){
  @sideOpposite: left;
}
when (@side = left){
  @sideOpposite: right;
}

Answer 1

有关使用示例,请参阅Mixin Guards和Ruleset Guards(又名"CSS Guards")when.由于您需要定义变量,因此您必须使用基于mixin的条件(规则集不会将其变量暴露给外部范围).例如:

.-();
.-() when (@side = right) {
    @sideOpposite: left;
}
.-() when (@side = left) {
    @sideOpposite: right;
}

(使用任何合适的mixin名称代替.-,例如.define-opposite-side).

---

通过Argument Pattern Matching,它可以进一步简化为:

.-(@side); 
.-(left)  {@sideOpposite: right}
.-(right) {@sideOpposite: left}