Wie funktioniert das kaufmännische Und (&) in SASS-Selektoren, um untergeordnete Selektoren dynamisch zu generieren?

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 gilt die folgende Syntax:

.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 Sie Mixins erstellen, die auf verschiedene übergeordnete Klassen angewendet werden können.

Das obige ist der detaillierte Inhalt vonWie funktioniert das kaufmännische Und (&) in SASS-Selektoren, um untergeordnete Selektoren dynamisch zu generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!