css - 减或运算符

Question

如果 other 是“未定义的”，是否可以有后备变量。如以下示例所示:

@defColor = '#fff';
@setColor = '';

.selector {
   color: @setColor || @defColor;
}

上面的例子应该返回:

.selector {
   color: #fff;
}

当 setColor 不为空时，它将使用它:

@defColor = '#fff';
@setColor = '#000';

.selector {
   color: @setColor || @defColor;
}

哪个会返回:

.selector {
   color: #000;
}

我知道以下会起作用:

.selector {
   color: @defColor;
   color: @setColor;
}

但是看起来不对。

谢谢!

Answer 1

我认为这应该使用 LESS 的逻辑 if ( documentation ) 和 iscolor ( documentation ) 函数:

@defColor: #fff;
@setColor: '';

.selector {
   color: if(iscolor(@setColor), @setColor, @defColor);
}

值得注意的是，"#fff" 被解释为字符串而不是颜色，因此在定义颜色变量时需要省略引号才能使此方法起作用。

您可以将其粘贴到 LESS 的 playground 中尝试一下。