Wie verwende ich das kaufmännische Und (&) in SASS-Selektoren für Referenzen auf übergeordnete Selektoren richtig?

Ampersand (&) in SASS: Verwendung am Ende und innerhalb von Selektoren

Entwickler stoßen oft auf Herausforderungen, wenn sie das kaufmännische Und (&) verwenden Zeichen in SASS-Selektoren, insbesondere wenn es am Ende oder innerhalb des Selektors erscheint. Diese Untersuchung befasst sich mit diesem speziellen Problem.

Das vorgestellte Mixin versucht, WENIGER Code auf SASS zu portieren. Aufgrund einer falschen Verwendung von & im Selektor erzeugt der Code jedoch nicht die gewünschte Ausgabe.

Um den Zweck des &-Zeichens zu verstehen, ist es wichtig, seine Rolle als Platzhalter für den übergeordneten Selektor zu erkennen . Bei Verwendung innerhalb eines Mixins oder Blocks stellt & den Selektor oder die Klasse dar, die das Mixin aufgerufen hat.

In diesem Fall besteht das beabsichtigte Verhalten darin, dass das Mixin Selektoren generiert, die den Klassennamen des aufrufenden Elements enthalten. Wenn das Mixin beispielsweise innerhalb eines

.callerClass .foreverAlone {
    ...
}

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

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

        .iThink &.illNeverWork {

            color: #123ABC;
            ...
        }
  }