SASS セレクターでアンパサンド (&) を効果的に使用するにはどうすればよいですか?

SASS セレクターのアンパサンド (&): その終わりとインラインでの使用をマスターする

アンパサンド文字 (&) は重要な役割を果たしますSASS セレクター内で、親セレクターを効果的に参照できるようになります。ただし、その使用法は、特に末尾またはセレクターの一部として使用される場合に注意が必要です。

問題:

SASS で次のミックスインを考えてみましょう:

<code class="sass">@mixin button-variant($color, $background, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork&amp; {

            color: $pinkUnicornRainbow;
            ...
        }
  }</code>

さまざまな div クラス内で呼び出された場合、このミックスインは目的の CSS を生成できません。次のようなものを生成する代わりに:

<code class="css">.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}</code>

間違った出力が生成されます。

解決策:

目的の CSS を実現するには、ニュアンスを理解する必要があります。アンパサンドの使用は必須です。 SASS バージョン 3.2 以前では、次の有効な方法を使用して親セレクターを参照できます:

<code class="sass">.foo {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

.foo {
    .bar &amp; {
        color: red;
    }
}</code>

Sass 3.3 以降では、構文が簡素化され、次のような使用が可能になりました:

<code class="sass">.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}</code>

Sass 3.4 以降では、さらに強力なアプローチが利用可能です:

<code class="sass">.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}</code>

これらのテクニックを利用すると、SASS セレクターでのアンパサンドの使用を効果的に処理でき、正確で保守可能な CSS を生成できます。出力。

以上がSASS セレクターでアンパサンド (&) を効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。