LESS带可选参数的Mixin如何跳过未定义属性不生成空值CSS属性

问题根源 #

Less 中的if()函数仅负责根据条件返回属性值，不会自动删除无有效值的属性行。即使参数默认设为null，只要属性名被硬写在mixin内，编译时就一定会输出该属性，仅值为空，这就是空border-block-end属性出现的原因。

可行实现方案 #

要实现「参数无有效值时不输出对应属性」，需要通过Less的条件守卫（when）控制属性块是否生成，有两种常用写法：

写法1：mixin内嵌套条件块（Less 3.5+ 支持，写法更简洁） #

直接在主mixin中用& when()包裹需要条件输出的属性，按参数优先级判断：

.border(@border; @block: null; @blockEnd: null) {
  // 必输出的基础属性
  border: @border;

  // 优先判断@blockEnd是否有值，有则直接用该值输出属性
  & when not (@blockEnd = null) {
    border-block-end: @blockEnd;
  }

  // @blockEnd为空时判断@block是否有值，有则用@block输出属性
  & when (@blockEnd = null) and not (@block = null) {
    border-block-end: @block;
  }
}

写法2：mixin重载（兼容所有Less版本） #

通过同名mixin+不同守卫条件实现重载，逻辑和上面完全一致：

// 基础mixin：输出必选border属性
.border(@border; @block: null; @blockEnd: null) {
  border: @border;
}

// 重载1：@blockEnd有值时，优先用@blockEnd输出border-block-end
.border(@border; @block; @blockEnd) when (@blockEnd != null) {
  border-block-end: @blockEnd;
}

// 重载2：@blockEnd为空、@block有值时，用@block输出border-block-end
.border(@border; @block; @blockEnd: null) when (@block != null) {
  border-block-end: @block;
}

编译效果验证 #

调用示例：

.container {
  .border(1px solid red);
}
.container2 {
  .border(1px solid blue; 2px solid green);
}
.container3 {
  .border(1px solid gray; 2px solid yellow; 3px solid purple);
}

编译后输出的CSS完全符合预期：

.container {
  border: 1px solid red;
}
.container2 {
  border: 1px solid blue;
  border-block-end: 2px solid green;
}
.container3 {
  border: 1px solid gray;
  border-block-end: 3px solid purple;
}

注意事项 #

• 缺省参数默认值统一用null，不要用空字符串""、false等值，否则守卫判断会出现不符合预期的结果
• 条件判断时严格区分=/!= null的逻辑，避免参数优先级判断冲突

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