Question

我想在我的border-radius mixin上添加一个Guard，如果border-radius为0，则不会给出任何输出。我的LESS代码效果很好，直到我使用多个参数。

.border-radius (@radius) when (@radius > 0) {
  border-radius: @radius;
}

.dosnt-work {
  .border-radius (5px 10px 5px 10px);
}

.works-correctly {
  .border-radius (5px);
}

.works-correctly-too {
  .border-radius (0px);
}

如果不创建4种不同的mixin，这可能吗？

Answer 1

由于您只接受一个参数，当您使用类似“5px 10px 5px 10px”的内容时，它会将整个字符串与0进行比较，并且不能合理地认为字符串大于零。解决这个问题的唯一方法是为多个参数提供另一个mixin。您可以使用相同的名称.border-radius：只需使用多个参数再次定义它。 LESS将根据参数的数量进行锻炼。

但是，我认为这有点误导。为什么要忽略零边界半径值？你怎么能覆盖以前的规则来关闭border-radius？

Answer 2

.border-radius(@radius) when not(@radius = 0) {
   border-radius: @radius;
}

但请注意，这不适用于（0 0），（0 0 0 0）等参数......

较少的CSS边框半径mixin不为0

2 个答案: