2

アプリのスタイルに LESS フレームワークを使い始めています。アプリ内で、要素の疑似クラスをすべて同じスタイルに標準化する必要がある場所がよくあります。

入力するのではなく

button:hover, button:active, button:hover:active { /*styles here */ }

LESS のネストされたスタイルを使用して、次のようにこれらの疑似クラスを追加しています。

.button {
 {
    &,
    &:hover,
    &:active,
    &:hover:active {
            border: 2px solid #000000
    }
}

これは完全に正常に機能し、疑似クラスが追加されたボタン クラスを出力します。

私の質問は次のとおりです。これをさらに一歩進めて、疑似呼び出しをミックスインに追加して、ミックスインを呼び出すことはできますか? これはやり過ぎのように思えるかもしれませんが、いくつかのスタイルシートでこれを再利用しているので、1 行のコードをミックスインして再利用できれば素晴らしいと思います。

4

1 に答える 1

2

機能的な mixin を使用できます。

.button(@_arg) {
    &,
    &:hover,
    &:active,
    &:hover:active {
            border: @_arg;
    }
}

そして、次のように使用します。

.example {
    .button(2px solid #000);
}
于 2012-10-17T23:24:55.913 に答える