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

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

Patricia Arquette

Freigeben： 2024-10-30 03:42:02

Original

943 Leute haben es durchsucht

How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

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

Element, es sollte Folgendes erzeugen:

.callerClass .foreverAlone {
    ...
}

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

Nach dem Login kopieren

Der bereitgestellte Code erreicht dies jedoch aufgrund der falschen Platzierung von & nicht. Um dieses Problem zu beheben, sollte & entsprechend verwendet werden, um den übergeordneten Selektor darzustellen:

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

        .iThink &amp;.illNeverWork {

            color: #123ABC;
            ...
        }
  }

Nach dem Login kopieren

Mit dieser korrigierten Implementierung stellt das Mixin die Aufruferklasse korrekt allen verschachtelten Selektoren voran, die im Mixin generiert werden. Denken Sie daran, dass die Platzierung und Verwendung von & die resultierende CSS-Ausgabe erheblich beeinflussen kann, daher ist es wichtig, es korrekt zu verwenden.

Das obige ist der detaillierte Inhalt vonWie verwende ich das kaufmännische Und (&) in SASS-Selektoren für Referenzen auf übergeordnete Selektoren richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!