Question

我为边框Shorthand属性创建了单独的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 guards，就像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;
    }
}

Less Mixins：边框智能混合

1 个答案: