css - 少ない Mixins: Border スマート Mixin

Question

私は、border Shorthand プロパティ用に別の 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);
}

これらの可能性を 1 つの mixin で接続する方法はありますか?

Answer 1

これを行うには、 if else 条件のような LESS mixin ガードを使用できます。それらに関する詳細なドキュメントはこちらです - 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;
    }
}