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

Question

我有一个 Less 变量，称为@side. 我想要的是@sideOpposite根据变量的值设置@side变量。它只能取两个值：“left”或“right”。

换句话说，我需要一个 Less 等效的 JS 代码：

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

我尝试使用when函数来完成此操作，但据我了解，它不能那样工作，并且仅适用于 CSS 属性，而不适用于变量：

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

score 14 · Accepted Answer

有关使用示例，请参阅Mixin Guards和Ruleset Guards（又名“CSS Guards”）。when由于您需要定义一个变量，因此您必须使用基于 mixin 的条件（规则集不会将其变量暴露给外部范围）。例如：

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

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

通过参数模式匹配，它可以进一步简化为：

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

score 0 · Accepted Answer

您可以借助mixin 保护功能来允许条件 mixins

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

score 0 · Accepted Answer

我不知道我是否了解您想要做什么，但是根据我对您的问题的了解，您可以使用 mixin 来做到这一点。查看示例

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

当你需要它时调用这个 mixin.side(left)或者当你需要使用.side(right).

3 回答 3