SASS セレクターでアンパサンド (&) はどのように機能し、子セレクターを動的に生成しますか?

SASS セレクターのアンパサンド (&)

SASS では、アンパサンド (&) はセレクター内で使用される場合に特別な意味を持ちます。提供されているミックスインの例で示されているように、親セレクターの一部を子セレクターに追加するために使用できます。

Sass バージョン 3.2 までの場合、次の構文が受け入れられます:

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

さらに、次の構文がサポートされています:

.foo {
    .bar & {
        color: red;
    }
}

Sass 3.3 以降、次の構文が有効です:

.foo {
    &bar, &-bar {
        color: red;
    }
}

最後に、Sass 3.4 では代替アプローチが導入されています:

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

これらの手法を利用すると、親セレクターの一部を含む子セレクターを動的に生成できます。これは、さまざまな親クラスに適用できるミックスインを作成する場合に特に便利です。

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