1

私がやりたいことは、引数を取り、1 つ以上の引数を他の mixin を含めるための名前として使用する mixin を作成することです。

適切な用語がわからないので、例を挙げて説明します。

@gradients{
    light:#fafafa; //Should these also be prefixed with @?
    dark:#888888;
}
@gradientBackground(@name,@height){
    background-image:url('../img/gradients/{@name}-{@height}.png'); //this works
    background-color:@gradients[@name];
}

.someBox{
    @gradientBackground(light;150);
}

//Expected result:
.someBox{
    background-image:url('../img/gradients/light-150.png'); //This works
    background-color:#fafafa; //This doesn't work.
}

画像は機能しますが、から適切な色を参照する方法をまだ理解していません@gradients。これはまったく可能ですか？

4

1 に答える 1

2

@gradients 変数はまったく必要ないと思います。変数を定義するだけです：

@light:#fafafa;
@dark:#888888;

mixin は、変数を定義する @ で始めるべきではありません。mixin は基本的に単なるクラスです。

.gradientBackground(@name:@dark, @height:500){
    background-image:url('../img/gradients/{@name}-{@height}.png');
    background-color:@name;
}

例として、ミックスインの属性を @dark color に設定し、高さを 500 に設定しました。

次に、ミックスインを別の定義で使用する場合は、次のようになります。

.somebox {
    .gradientBackground(@light, 150);
}

そのため、ミックスインを使用している時点で、デフォルト値を保持するか、新しい値を渡すことができます (例: @light & 150)

それが役立つことを願っています!

于 2011-03-27T19:56:49.653 に答える