SASS セレクターでアンパサンド (&) を使用する方法: ミックスインによるネストの課題を解決する

SASS セレクターのアンパサンド (&): 使用法と回避策

CSS の前処理言語である SASS では、アンパサンド (&) 記号が使用されます親セレクターを表すため、コードの再利用と保守が可能になります。ただし、アンパサンドを末尾またはセレクターの一部として使用すると、問題が発生する可能性があります。

問題の概要

LESS の動作を模倣することを目的としたミックスインには、アンパサンド (&) が末尾にあるため、不正な出力が発生します。望ましい結果は、以下に示すように、呼び出し元クラスが後続の各レベルに追加されるネストされたセレクターのセットを生成することです。

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: $pinkUnicornRainbow;
    ...
}

Solutions

For Sassバージョン 3.2 以下では、親セレクターを使用する有効な方法は次のとおりです。

&, &.bar, &#bar, &:after, &[active]

Sass 3.3 では、次の構文が追加されています。

&bar, &-bar

Sass 3.4 では、新しい機能が導入されています。アンパサンドは変数に割り当てて @at-root ルール内で使用できます:

$foo: &;

@at-root bar#{&} {
    color: red;
}

問題への適用

指定されたミックスインに対処するには、アンパサンドは、次のように呼び出し元クラスと組み合わせて使用​​する必要があります:

@mixin button-variant($color, $background, $border)
{
    ...
    .callerClass&.foreverAlone{
        ...
    }

    .callerClass&.iThink .illNeverWork.callerClass& {

        color: $pinkUnicornRainbow;
        ...
    }
}

以上がSASS セレクターでアンパサンド (&) を使用する方法: ミックスインによるネストの課題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。