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

Question

我有一个名为 @side 的 Less 变量。我想要的是根据 @side 变量的值设置变量 @sideOpposite 。它只能采用两个值:“左”或“右”。

换句话说，我需要一个更少的 JS 代码:

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}