23

&以下のコードで が何をするのか理解しようとしていますか?

  .controls-container  {
        .flex-control-nav  {
            li a  {
                &.flex-active  {
                    filter: none;
                    background: @color_links!important;
                }
            }
        }
    }

のようなことができることは知っていますが&:hover、その直後にクラスを表示することに慣れていませんか?

4

3 に答える 3

27

のようなことができることは知っていますが&:hover、その直後にクラスを表示することに慣れていませんか?

ここでも同じロジックです。内側のセレクターを、外側のセレクターによって表されるものにチェーンします。疑似クラス like:hoverおよびクラス like.flex-activeは、 と同じように動作し&ます。

それをCSSにコンパイルすると、セレクターを含むルールになります

.controls-container .flex-control-nav li a.flex-active
于 2013-01-08T13:21:00.383 に答える
9

コンパイラは「&」を現在の外部セレクターに置き換えます

これにより:hover、:active、:beforeなど、またはその他のケースにさまざまなスタイルを提供できます。

あなたの場合、最も内側のセレクターは、コンパイル後に結果の CSS ファイルで次のようになります。

.controls-container .flex-control-nav li a.flex-active { ... }
于 2013-01-08T13:24:29.497 に答える
7

発生する可能性のある場所に、親の&ネスト構造を追加し&ます。したがって、他の人が指摘しているように&、例にinを入れると、の完全なネストされた文字列が取得され、コード内の.controls-container .flex-control-nav li aが置き換えられて（この場合）クラスがタグに結合されます...&.flex-activea

.controls-container .flex-control-nav li a.flex-active

...タグの子の代わりに...a

.controls-container .flex-control-nav li a .flex-active

セレクターの「文字列置換」と考えると、視覚化に役立ちます。たとえば、これ（私が置いた場所に注意してください&）...

.controls-container  {
    .flex-control-nav  {
        li a  {
            .flex-active & {
                filter: none;
                background: @color_links!important;
            }
        }
    }
}

...このセレクターを生成します...

.flex-active .controls-container .flex-control-nav li a

...クラスの後にネストされた構造を追加するため.flex-active。

于 2013-01-08T15:11:28.610 に答える