web-dev-qa-db-ja.com

「&」はLESS CSSで何をしますか?

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

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

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

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