セレクターの末尾にアンパサンド(&)を使用する場合にSASS Mixinで親セレクターを拡張するにはどうすればよいですか?

SASS セレクターのアンパサンド (&): 親スコープの拡張

SASS では、アンパサンド (&) 記号は、親セレクターを拡張します。これにより、親セレクター自身のクラス名を含む方法で、ミックスイン内にルールをネストすることができます。ただし、セレクターの末尾にアンパサンドを使用すると、特有の課題が生じます。

問題は、セレクターに呼び出し元のクラス名が含まれていることを確認することにあります。次の Sass ミックスインについて考えてみましょう:

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

    .iThink .illNeverWork& {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

このミックスインが別の CSS クラス内で呼び出される場合、生成されたコードには呼び出し元のクラス名が含まれません。代わりに、

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

.iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}</code>

この問題を解決するには、次のテクニックを利用できます:

Sass バージョン 3.2 以前:

• 複数のセレクターの使用: アンパサンド (&) が一貫して使用されるように、各セレクターをコンマで区切ります。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .foreverAlone,
    .iThink &.illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass バージョン 3.3:

• ハイフン付き構文: ハイフン付き構文を使用して親セレクターを拡張します。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .iThink &-illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass バージョン 3.4:

• アットルート ルール: 親セレクターを保持する変数を定義し、@at-root ルールを使用してそれを拡張します。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    $parent: &;
    @at-root .iThink#{&} {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

これらの手法を実装すると、ミックスイン内の親セレクターを効果的に拡張でき、生成されたコードに呼び出し元のクラス名が含まれるようになります。

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