带有可选参数的 LESS Mixins - 跳过未定义的属性

Question

我是 Less 的新手，正在尝试转换一些 SCSS mixin。 但是，我在使用可选参数时遇到了一些问题。 例如：

.border(@border; @block: null; @blockEnd: null) {
  border: @border;
  border-block-end: if(@blockEnd, @blockEnd, @block);
}

.container {
  .border(@border: 1px solid red);
}

这导致以下 CSS：

.container {
  border: 1px solid red;
  border-block-end: ;
}

请注意，仍会生成border-block-end ，但值为空。

如何将 mixin 参数设置为可选，如未undefined ，并且如果该参数存在，则仅生成 CSS 属性？

目标 Output

// LESS
.container {
  .border(@border: 1px solid red);
}

// Would generate CSS...
.container {
  border: 1px solid red;
  // Only generates properties with a value
}

Answer 1

看起来我能够利用Mixin Guards 。 通过使用嵌套在 mixin 中的when not和if not运算符，我可以检查多个参数，其中,分隔符充当or 。

当@blockEnd 或@block 为真时，编译如下

.border(@border; @block: null; @blockEnd: null;) {
  border: @border;
  
  & when not(@blockEnd = null), not(@block = null) {
    border-block-end: if(not (@blockEnd = null), @blockEnd, @block);
  }
}

这将评估为：

// LESS
.container {
  .border(@border: 1px solid red);
}

// CSS
.container {
  border: 1px solid red;
}

感觉很冗长，但它完成了工作。我是否错过了一种更简单的方法，可能吗？