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?
sass
css-selectors
McShaman
quelle
quelle
.item a.item
irgendeinem Grund heraus. Ich habea#{&}
es auch alleine versucht und trotzdem das gleiche Ergebnis erzielt.Die
@at-root
Methode -only löst das Problem nicht, wenn Sie beabsichtigen, den nächstgelegenen Selektor entlang der Kette zu erweitern. Als Beispiel:Wird kompiliert zu:
Was ist, wenn Sie Ihr Tag
.element
anstelle von verbinden müssen#id
?Es gibt eine Funktion in Sass
selector-unify()
, die dieses Problem löst. Mit diesem@at-root
ist es möglich zu zielen.element
.Wird kompiliert zu:
quelle
#id > .element #id > div.element { color: blue; }
. Ein anderer Ansatz wäre zu verwendenselector_replace
,#id { > .element { @at-root #{selector-replace(&,'.element', 'div.element')} { color: blue;}}}
. Hier ist ein Kern für eine bessere Lesbarkeit.selector-replace
ist auch eine andere Möglichkeit, dies zu tun, aber es erfordert zu wissen, was der Selektor ist. Dasselector-unify
Verfahren hat den Vorteil, dass es in Mixins verwendet wird.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:
Die andere Art, das kaufmännische Und zu verwenden, ist wahrscheinlich das, wonach Sie (fälschlicherweise) suchen:
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?
Auf diese Weise können Sie Ihren SASS einfach folgendermaßen schreiben:
(Randnotiz: Sie sollten sich Ihr HTML ansehen. Sie mischen einfache und doppelte Anführungszeichen UND setzen href-Attribute auf p-Tags.)
quelle
href
Tag auf ein setzt, dazup
zu bringen, funktionierendes CSS zu schreiben..item { a& }
und es gibt keine sass Syntax für die (soweit ich bewusst bin. Ich schlug ihm wahrscheinlich so etwas wie die Ampersand Syntax war auf der Suche Sie beschrieben , die in Sass ziemlich regelmäßig verwendet wird. Allerdings baut auf OPs Beispiel.item { &a }
ist ungültig und würde kompilieren.itema
. Genau wie ich in meiner Antwort gesagt habe. Gibt es etwas, das mir fehlt?.item { a& { ... } }
was jetzt gemacht werden kann, wie @Blaine mit betont.item { @at-root a#{&} { ... } }
. Der Punkt ist, wenn Sie eine Klasse für das Element haben, ist dies einfach..item { &.class { ... } }
Warum sollten Sie nicht in der Lage sein, dasselbe mit einem rohen HTML-Element zu tun? Nur weil es zum Zeitpunkt der Veröffentlichung von OP keine Möglichkeit gab, dies zu tun, heißt das nicht, dass er falsch war, wenn er wollte, dass die Funktionalität es tatsächlich tut.AFAIK Wenn Sie kaufmännisches Und für Klasse und Tags gleichzeitig kombinieren möchten, müssen Sie folgende Syntax verwenden:
wird zu kompilieren
Andere Verwendungen (wie die Verwendung der Klasse vor
@at-root
oder mehrere@at-root
s) führen zu Fehlern.Hoffe es wird nützlich sein
quelle
#{&}
Grunde den Compiler - oder wird das in Zukunft immer funktionieren?#{}
wird ausgewertet. Bedeutet auch&
Stromauswahl. So#{&}
wird ausgewertet.c1
.&
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-root
Direktive, 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
quelle