2

LESSを使用して一連のボタンに取り組んでいますが、解決策が見つからないような状況に遭遇しました。.button基本的に、通常の状態とミックスイン自体の中で宣言されたホバー状態を持つクラスに適用しているミックスインがあります。

&:hoverさて、問題は、ミックスインで宣言を適用することを強制されないように条件を追加したいので、@check変数にデフォルト値を設定when (@check)して:hover状態で使用しようとしましたが、これはエラーを生成します。

私はこれを元のブロックから少し下げましたが、基本的にこれは私がやりたいことを表していますが、達成するための適切な方法を見つけることができないようです。

._mixin (@color: red, @check: true) {
    background: @color;

    &:hover() when (@check) { // tried &:hover(@check) when (@check) as well
       background: darken(@color, 10%);
    }
}

.button {

    ._mixin(#333);

    &.disabled {
        ._mixin(#333, false);
    }    

}

を要素に適用する:hover場合など、オンデマンドで状態を除外するようにミックスインを設定するにはどうすればよいですか？.button.disabled

4

1 に答える 1

2

あなたがする必要があるのは、ミックスインを2回宣言することです。1回は適用する必要のあるすべてのスタイルに対して、もう1回はガードが必要なすべてのスタイルに対してです。

//these styles are always applied when ._mixin is used
._mixin (@color: red, ...) {
    background: @color;
}
//these styles are applied only when the second parameter is true
._mixin (@color: red, true) {
    &:hover {
        background: darken(@color, 10%);
    }
}

.button {
    ._mixin(#333);

    &.disabled {
        ._mixin(#333, false);
    }    
}

または、ガードが付いた内部ミックスインを作成することもできます。

._mixin (@color: red, @guard: true) {
    background: @color;
    //catchall for when the guard doesn't match
    .inner() {}
    //set your styles that you want to match in a guarded inner mixin
    .inner() when (@guard) {
      &:hover {
        background: darken(@color, 10%);
      }
    }
    //apply the inner mixin to the current mixin
    .inner;
}
于 2013-02-21T22:14:56.050 に答える