Verwendung des kaufmännischen Und-Zeichens (&) in SASS-Selektoren: Verschachtelungsprobleme mit Mixins lösen

kaufmännisches Und (&) in SASS-Selektoren: Verwendungen und Problemumgehungen

SASS, eine Vorverarbeitungssprache für CSS, verwendet ein kaufmännisches Und-Symbol (&). um den übergeordneten Selektor darzustellen und so wiederverwendbaren und wartbaren Code zu ermöglichen. Die Verwendung des kaufmännischen Und-Zeichens am Ende oder als Teil eines Selektors kann jedoch zu Herausforderungen führen.

Problemübersicht

Ein Mixin, das LESS-Verhalten nachahmen soll, verfügt über einen Selektor mit einem Das kaufmännische Und-Zeichen (&) am Ende führt zu einer falschen Ausgabe. Das gewünschte Ergebnis besteht darin, einen verschachtelten Satz von Selektoren zu generieren, bei dem die Anruferklasse zu jeder nachfolgenden Ebene hinzugefügt wird, wie unten gezeigt:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: $pinkUnicornRainbow;
    ...
}

Lösungen

Für Sass Zu den gültigen Möglichkeiten zur Verwendung des übergeordneten Selektors in den Versionen 3.2 und niedriger gehören:

&, &.bar, &#bar, &:after, &[active]

In Sass 3.3 wird die folgende Syntax hinzugefügt:

&bar, &-bar

Sass 3.4 führt eine neue Funktion ein, bei der die kaufmännisches Und kann einer Variablen zugewiesen und innerhalb einer @at-root-Regel verwendet werden:

$foo: &;

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

Anwendung auf Problem

Um das gegebene Mixin anzusprechen, Das kaufmännische Und sollte in Verbindung mit der Anruferklasse wie folgt verwendet werden:

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

    .callerClass&.iThink .illNeverWork.callerClass& {

        color: $pinkUnicornRainbow;
        ...
    }
}

Das obige ist der detaillierte Inhalt vonVerwendung des kaufmännischen Und-Zeichens (&) in SASS-Selektoren: Verschachtelungsprobleme mit Mixins lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!