Ampersand (&) in SASS-Selektoren

In SASS hat das kaufmännische Und (&) eine besondere Bedeutung, wenn es in Selektoren verwendet wird. Wie im bereitgestellten Beispiel-Mixin gezeigt, kann es verwendet werden, um einen Teil des übergeordneten Selektors an einen untergeordneten Selektor anzuhängen.

Für Sass-Versionen bis 3.2 ist die folgende Syntax akzeptabel:

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

Zusätzlich wird diese Syntax unterstützt:

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

Ab Sass 3.3 ist die folgende Syntax gültig:

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

Schließlich führt Sass 3.4 einen alternativen Ansatz ein:

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

Durch die Verwendung dieser Techniken können Sie untergeordnete Selektoren dynamisch generieren, die Teile des übergeordneten Selektors enthalten. Dies ist besonders nützlich, wenn Mixins erstellt werden, die auf verschiedene übergeordnete Klassen angewendet werden können.