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

Question

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

换句话说，我需要一个等价于 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 用法示例。由于您需要定义一个变量，因此您必须使用基于混合的条件(规则集不会将其变量暴露给外部范围)。例如:

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

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

---

还有Argument Pattern Matching它可以进一步简化为:

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