Ich verwende Sass (.scss) für mein aktuelles Projekt.
Folgendes Beispiel:
HTML
<div class="container desc">
<div class="hello">
Hello World
</div>
</div>
SCSS
.container {
background:red;
color:white;
.hello {
padding-left:50px;
}
}
Das funktioniert super.
Kann ich mehrere Klassen verarbeiten, während ich verschachtelte Stile verwende?
Im obigen Beispiel spreche ich darüber:
CSS
.container.desc {
background:blue;
}
In diesem Fall werden alle div.container
würden normalerweise red
aber div.container.desc
wäre blau.
Wie kann ich das container
mit Sass verschachteln ?
Antworten:
Sie können die übergeordnete Auswahlreferenz verwenden
&
. Sie wird nach der Kompilierung durch die übergeordnete Auswahl ersetzt:Für Ihr Beispiel:
Das
&
wird vollständig aufgelöst. Wenn Ihr übergeordneter Selektor selbst verschachtelt ist, wird die Verschachtelung aufgelöst, bevor das ersetzt wird&
.Diese Notation wird am häufigsten zum Schreiben von Pseudoelementen und -klassen verwendet :
Sie können das
&
Gerät jedoch an praktisch jeder beliebigen Position platzieren * , sodass auch Folgendes möglich ist:Beachten Sie jedoch, dass dies Ihre Verschachtelungsstruktur irgendwie zerstört und somit den Aufwand für das Auffinden einer bestimmten Regel in Ihrem Stylesheet erhöhen kann.
*: Vor dem dürfen keine anderen Zeichen als Leerzeichen verwendet werden
&
. Sie können also keine direkte Verkettung vonselector
+&
- durchführen, da#id&
dies einen Fehler auslösen würde.quelle
&
ist die Verwendung von Pseudoelementen und Pseudoklassen. Zum Beispiel :&:hover
.&
es am Ende einer Zeile verwendet wird, wird diese Zeile auf allen anderen Ebenen am Anfang der restlichen Klassen platziert. Sie können Elemente kombinieren, indem Sie&.desc
unter.container
ausführen, was .desc anhängen würde, was zu.container.desc
Wenn dies der Fall ist, müssen Sie meiner Meinung nach eine bessere Methode zum Erstellen eines Klassennamens oder einer Klassennamenkonvention verwenden. Wie Sie bereits sagten, soll die
.container
Klasse je nach Verwendung oder Erscheinungsbild eine andere Farbe haben. Du kannst das:SCSS
CSS
quelle
.container--desc
und am Ende keine Ergebnisse erzielen.Christophs Antwort ist perfekt. Manchmal möchten Sie jedoch möglicherweise mehr als eine Klasse aufsteigen. In diesem Fall könnten Sie die Funktionen
@at-root
und#{}
css ausprobieren, mit denen zwei Stammklassen mithilfe von nebeneinander sitzen können&
.Dies würde (aufgrund der
nothing before &
Regel) nicht funktionieren :Aber das würde (mit
@at-root plus #{&}
):quelle