css - Less Mixins：边界智能混合

Question

我为边框速记属性创建了单独的 mixin，为不同的边创建了另一个 mixin。

速记

.border(@width: 1px, @style: solid, @color: black){
      border: @arguments;
}

用法

.class1{
     .border;
}

针对不同的面

.bordered(@property; @value) {
  border-@{property}: @value;
}

用法

.class2{
     .bordered(top, 1px, solid red);
}

有没有办法在一个 mixin 中连接这些可能性？

Answer 1

为此，您可以使用 LESS mixin 保护，类似于 if else 条件。有关它们的更多文档在这里 - http://lesscss.org/features/#mixin-guards-feature 这是我的想法的快速伪代码：

.border when (@side = all) {
    .border(@width: 1px, @style: solid, @color: black, @side: all){
        border: @width @style @color;
    }
}
.border when not (@side = all) {
    .border(@property; @value; @side) {
        border-@{side}-@{property}: @value;
    }
}