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;
    }
}

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