1

これは、私のミックスインを含むルールセット.greyMixin()です .disabled()。問題は、1 つの mixin に複数のプロパティを書き込む方法が見つからないことです。colorとbackgroundが分離されている結果を見ることができます。それらを 1 つの宣言にまとめたいと思います。

.formater(@className; @rules){
    .@{className}{
        @rules();
    }
}
.greyMixin(@property, @g, @a:1){
    @rgba: rgba(@g,@g,@g,@a);
    .mixin();
    .mixin() when((@a) < 1) and (@a > 0){
        @{property}:@rgba;
        }& when ((@a) = 1){
            @{property}:@rgba;
        }& when ((@a) = 0){
            @{property}:@rgba;
        }   
}
.disabled(@property, @g, @a:1){
    @rgba: rgba(@g,@g,@g,@a);
    @rgb:rgb(@g,@g,@g);
        .mixin();
        .mixin() when((@a) < 1) and (@a > 0){
        &:disabled,&.disabled {
            &:hover,&:focus,&:active{
                @{property}:@rgba;
            }
        }& when ((@a) = 1){
            &:disabled,&.disabled { 
                &:hover,&:focus,&:active{
                    @{property}:@rgb;
                }
            }
            }& when ((@a) = 0){
                &:disabled,&.disabled { 
                    &:hover,&:focus,&:active{
                        @{property}:@rgba;
                    }
                }
                }
        }
}
.formater(colourclass;{
    .greyMixin(color,25,1);
    .greyMixin(background,110,0.8);
    .disabled(color,240,0.8);
    .disabled(background, 10,0.4)});

結果は次のとおりです。

.colourclass {
    color: #191919;
    background: rgba(110, 110, 110, 0.8);
}
.colourclass:disabled:hover,
.colourclass.disabled:hover,
.colourclass:disabled:focus,
.colourclass.disabled:focus,
.colourclass:disabled:active,
.colourclass.disabled:active {
    color: rgba(240, 240, 240, 0.8);
}
.colourclass:disabled:hover,
.colourclass.disabled:hover,
.colourclass:disabled:focus,
.colourclass.disabled:focus,
.colourclass:disabled:active,
.colourclass.disabled:active {
    background: rgba(10, 10, 10, 0.4);
}

私はless.js 2.5.3を使用しています。Windows 7; Winless コンパイラ 1.9.1。

4

2 に答える 2

3

この場合、以下のスニペットのようにループと配列リストを使用できます。お気づきのように、入力パラメーターは単一の値ではなく、すべて配列です。mixin 内では、extract関数を使用してプロパティ、その色の値、およびインデックスに基づいたアルファを抽出し、ループを使用してプロパティを作成できます。

注：.mixin()すべてのケースで同じプロパティと出力が設定されているように見えるため、これらのガードが必要な理由がわかりませんでした。そのため、以下のスニペットでそれを削除しました。

1 つの mixin ( .greyMixin) に対してのみ変更を行いましたが、他の mixin に対しても同じことを行うことができます。

.formater(@className; @rules){
    .@{className}{
        @rules();
    }
}
.greyMixin(@properties; @g; @a:1){
  @propCount: length(@properties);
  .loop-properties(@index) when (@index > 0){
    @property: extract(@properties, @index);
    @col: extract(@g, @index);
    @alpha: extract(@a, @index);
    @rgba: rgba(@col,@col,@col,@alpha);
    @{property}:@rgba;
    .loop-properties(@index - 1);
  }
  .loop-properties(@propCount);
}
.formater(colourclass;{
    .greyMixin(color, background;25, 110;1, 0.8);
});
于 2015-11-13T07:11:38.837 に答える