Sass kombiniert Eltern mit kaufmännischem Und (&) mit Typselektoren

Ich habe Probleme mit dem Nisten in Sass. Angenommen, ich habe den folgenden HTML-Code:

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Wenn ich versuche, meine Stile wie folgt zu verschachteln, wird ein Kompilierungsfehler angezeigt:

.item {
    color: black;
    a& {
        color:blue;
   }
}

Wie verweise ich auf einen Typselektor vor dem übergeordneten Selektor, wenn dieser Teil desselben Elements ist?

Wie Kumar betont , ist dies seit Sass möglich 3.3.0.rc.1 (Maptastic Maple).

Die @ at-root-Direktive bewirkt, dass eine oder mehrere Regeln im Stammverzeichnis des Dokuments ausgegeben werden, anstatt unter ihren übergeordneten Selektoren verschachtelt zu sein.

Wir können die @at-rootDirektive zusammen mit der Interpolation#{} kombinieren , um zum beabsichtigten Ergebnis zu gelangen.

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

CSS ausgeben

.item {
    color: black;
}
a.item {
    color: blue;
}

Die @at-rootMethode -only löst das Problem nicht, wenn Sie beabsichtigen, den nächstgelegenen Selektor entlang der Kette zu erweitern. Als Beispiel:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Wird kompiliert zu:

div#id > .element {
    color: blue;
}

Was ist, wenn Sie Ihr Tag .elementanstelle von verbinden müssen #id?

Es gibt eine Funktion in Sass selector-unify(), die dieses Problem löst. Mit diesem @at-rootist es möglich zu zielen .element.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Wird kompiliert zu:

#id > div.element {
    color: blue;
}

Für den Anfang (zum Zeitpunkt des Schreibens dieser Antwort) gibt es keine Sass-Syntax, die Selector & verwendet . Wenn Sie so etwas tun würden, benötigen Sie ein Leerzeichen zwischen dem Selektor und dem kaufmännischen Und. Beispielsweise:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

Die andere Art, das kaufmännische Und zu verwenden, ist wahrscheinlich das, wonach Sie (fälschlicherweise) suchen:

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Auf diese Weise können Sie Selektoren mit anderen Klassen, IDs, Pseudo-Selektoren usw. erweitern. Leider würde dies in Ihrem Fall theoretisch zu etwas wie .itema kompiliert, was offensichtlich nicht funktioniert.

Vielleicht möchten Sie nur überdenken, wie Sie Ihr CSS schreiben. Gibt es ein übergeordnetes Element, das Sie verwenden könnten?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

Auf diese Weise können Sie Ihren SASS einfach folgendermaßen schreiben:

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Randnotiz: Sie sollten sich Ihr HTML ansehen. Sie mischen einfache und doppelte Anführungszeichen UND setzen href-Attribute auf p-Tags.)

AFAIK Wenn Sie kaufmännisches Und für Klasse und Tags gleichzeitig kombinieren möchten, müssen Sie folgende Syntax verwenden:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

wird zu kompilieren

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

Andere Verwendungen (wie die Verwendung der Klasse vor @at-rootoder mehrere @at-roots) führen zu Fehlern.

Hoffe es wird nützlich sein

Diese Funktion ist in der neuesten Version von Sass gelandet. 3.3.0.rc.1(Maptastic Maple)

Die beiden eng verwandten Funktionen, die Sie verwenden müssen, sind die Skriptfunktion &, die Sie in verschachtelten Stilen interpolieren können, um auf übergeordnete Elemente zu verweisen, und die @at-rootDirektive, die den unmittelbar folgenden Selektor oder CSS-Block im Stammverzeichnis platziert (dies ist nicht der Fall) habe irgendwelche Eltern in der ausgegebenen CSS)

Weitere Informationen finden Sie in dieser Github-Ausgabe