SASS セレクターで親セレクター参照のアンパサンド (&) を正しく使用するにはどうすればよいですか?

SASS のアンパサンド (&): セレクターの最後およびセレクター内での使用

開発者は、アンパサンド (&) を使用するときに問題に遭遇することがよくあります。 SASS セレクター内の文字、特にセレクターの最後または内部に表示される場合。この調査では、この特定の問題を詳しく調査します。

提示された mixin は、いくつかの LESS コードを SASS に移植しようとします。ただし、セレクターでの & の使用法が間違っているため、コードは目的の出力を生成できません。

& 文字の目的を理解するには、親セレクターのプレースホルダーとしてのその役割を認識することが重要です。 。ミックスインまたはブロック内で使用される場合、& はミックスインを呼び出したセレクターまたはクラスを表します。

この場合、意図された動作は、ミックスインが呼び出し元の要素のクラス名を含むセレクターを生成することです。たとえば、ミックスインが

内で呼び出された場合、要素では、

.callerClass .foreverAlone {
    ...
}

.callerClass .iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}

が生成されるはずですが、& の配置が間違っているため、提供されたコードではこれが実現されません。この問題を解決するには、親セレクターを表すために & を適切に使用する必要があります:

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

        .iThink &.illNeverWork {

            color: #123ABC;
            ...
        }
  }

この修正された実装では、ミックスインは、ミックスイン内で生成されたネストされたセレクターの先頭に呼び出し元クラスを正しく追加します。 & の配置と使用法は、結果として得られる CSS 出力に大きな影響を与える可能性があるため、正確に使用することが重要であることに注意してください。

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

css less sass if for include using class this issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。