1

LESS Mixin についての (できれば) 簡単な質問: これら 2 つの mixin を何らかの方法で組み合わせることができますか? というのは、それらは多くの同じ情報を共有しているため、1 つだけが余分な色を追加するからです。

.gradient-top(@color-1, @color-2){
    background-color: @color-2;
    background: -webkit-linear-gradient(top, @color-1, @color-2);
    background: -moz-linear-gradient(top, @color-1, @color-2);
    background: -ms-linear-gradient(top, @color-1, @color-2);
    background: -o-linear-gradient(top, @color-1, @color-2);
    background: linear-gradient(top, @color-1, @color-2);
}

.gradient-middle(@color-1, @color-2, @color-3){
    background-color: @color-2;
    background: -webkit-linear-gradient(top, @color-1, @color-2, @color-3);
    background: -moz-linear-gradient(top, @color-1, @color-2, @color-3);
    background: -ms-linear-gradient(top, @color-1, @color-2, @color-3);
    background: -o-linear-gradient(top, @color-1, @color-2, @color-3);
    background: linear-gradient(top, @color-1, @color-2, @color-3);    
}
4

1 に答える 1

2

@argumentsLESS は、変数を介して mixin に渡されるすべての引数へのアクセスをサポートします。

.gradient(@color-1, @color-2, ...) {
    @gradient-stops: ~`"@{arguments}".slice(1, -1)`;
    background-color: @color-2;
    background: -webkit-linear-gradient(top, @gradient-stops);
    background: -moz-linear-gradient(top, @gradient-stops);
    background: -ms-linear-gradient(top, @gradient-stops);
    background: -o-linear-gradient(top, @gradient-stops);
    background: linear-gradient(top, @gradient-stops);
}

~コンマを保持するには、セレクタ補間 ( ) とインライン JavaScript 評価 (バッククォートを使用) が必要background: linear-gradient(top, #color-1 #color-2 #color-n);です。

この mixin が行うもう 1 つのことは、"rest" シンボル ( ) を介して2つ以上の...引数を受け入れることです。これにより、3 つの色と 2 つの色の混合を呼び出すことができます。

.gradient(#FFF, #CCC, #000) // A valid invocation of the mixin
于 2013-08-21T06:21:53.517 に答える