css - 更少的混合 : Border smart mixins

Question

我为 border Shorthand 属性创建了单独的 mixins，另一个为不同的边创建了 mixins。

速记

.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;
    }
}