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

Question

我有一个名为@side的Less变量。我想要的是根据@sideOpposite变量的值设置变量@side。它只需要两个值：＆＃34; left＆＃34;或＆＃34;对＆＃34;。

换句话说，我需要一个与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（又名＆＃34; CSS Guards＆＃34;）了解when个使用示例。由于您需要定义变量，因此您必须使用基于mixin的条件（规则集不会将其变量暴露给外部范围）。 E.g：

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

（使用任何合适的mixin名称代替.-，例如.define-opposite-side）。

<强> ---

使用Argument Pattern Matching可以进一步简化为：

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

Answer 2

我不知道我是否理解你想做什么，但从我对你的问题的了解，你可以用mixin来做到这一点。见例子

//This is the mixin with default value
.side(@leftORoposite: left) { float: @leftORoposite ;} 

当您需要使用.side(left)或需要.side(right)时，请调用此mixin。

Answer 3

您可以获取the mixin guard feature的帮助以允许条件混音

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