web-dev-qa-db-ja.com

「＆」はLESS CSSで何をしますか？

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

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

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

csscss-selectorsless
19
Jared

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

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

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

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

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

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

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

.controls-container .flex-control-nav li a.flex-active { ... }
8
Robert Koritnik

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

.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

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

6
ScottS