Less中如何使用OR运算符实现变量未定义时的回退赋值

在Less中可以很方便的实现变量回退逻辑，以下是两种适配不同场景的规范实现方式：

方案1：使用!default标记（适配变量未定义场景） #

这是Less官方推荐的默认变量声明方式，仅当目标变量未被定义时，才会使用!default标记的值：

// 若@setColor未被外部定义，则自动赋值为@defColor
@setColor: @defColor !default;
@defColor: #fff;

.selector {
  color: @setColor;
}

方案2：使用条件判断函数（适配未定义+空值双场景） #

如果需要同时兼容变量为空字符串的场景，可以搭配Less内置的if、isdefined、isempty函数实现精准判断，完全匹配你需求的逻辑：

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

.selector {
  // 判断逻辑：@setColor已定义且非空时用它，否则用@defColor
  color: if(and(isdefined(@setColor), not(isempty(@setColor))), @setColor, @defColor);
}

如果使用的是Less 4.0及以上版本，还可以直接用你示例中写的||逻辑运算符，写法更简洁：

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

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

注意：Less中变量赋值使用冒号:而非等号=，颜色值不需要额外加引号，可直接写为@defColor: #fff;

内容的提问来源于stack exchange，提问作者prettyInPink