SASS セレクターで親セレクター参照のアンパサンド (&) を正しく使用するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-30 03:42:02

オリジナル

1059 人が閲覧しました

How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

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

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

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

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

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

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

.callerClass .foreverAlone {
    ...
}

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

ログイン後にコピー

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

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

        .iThink &amp;.illNeverWork {

            color: #123ABC;
            ...
        }
  }

ログイン後にコピー

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

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