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

Element, es sollte Folgendes erzeugen:

.callerClass .foreverAlone {
    ...
}

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

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 &.illNeverWork {

            color: #123ABC;
            ...
        }
  }

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!

css less sass if for include using class this issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn