Wie kann ich das kaufmännische Und (&) in SASS-Selektoren effektiv verwenden?

Das kaufmännische Und-Zeichen (&) in SASS-Selektoren: Beherrschen seiner End- und Inline-Verwendung

Das kaufmännische Und-Zeichen (&) spielt eine entscheidende Rolle in SASS-Selektoren, sodass Sie effektiv auf den übergeordneten Selektor verweisen können. Allerdings kann seine Verwendung schwierig sein, insbesondere wenn es am Ende oder als Teil eines Selektors erscheint.

Problem:

Betrachten Sie das folgende Mixin in SASS:

<code class="sass">@mixin button-variant($color, $background, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork&amp; {

            color: $pinkUnicornRainbow;
            ...
        }
  }</code>

Beim Aufruf innerhalb verschiedener div-Klassen kann dieses Mixin nicht das beabsichtigte CSS generieren. Anstatt so etwas zu produzieren:

<code class="css">.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}</code>

es erzeugt eine falsche Ausgabe.

Lösung:

Um das gewünschte CSS zu erreichen, die Nuancen verstehen Die Verwendung von kaufmännischen Und-Zeichen ist unerlässlich. In SASS-Versionen 3.2 und älter können die folgenden gültigen Methoden verwendet werden, um auf den übergeordneten Selektor zu verweisen:

<code class="sass">.foo {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

.foo {
    .bar &amp; {
        color: red;
    }
}</code>

Ab Sass 3.3 ist die Syntax vereinfacht und ermöglicht eine Verwendung wie:

<code class="sass">.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}</code>

Für Sass 3.4 und höher ist ein noch leistungsfähigerer Ansatz verfügbar:

<code class="sass">.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}</code>

Mit diesen Techniken können Sie die Verwendung von kaufmännischen Und-Zeichen in SASS-Selektoren effektiv bewältigen und so präzises und wartbares CSS generieren Ausgänge.

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