SCSS - Platzhalter
1. Allgemeines
Damit kann man übergeordnete Selektoren "übernehmen". Das gilt sowohl für ID- oder Klassenselektoren als auch Pseudoklassen beziehungsweise -elemente.
Dafür wird das &
-Zeichen vorangestellt.
2. ID- oder Klassen-Selektoren
In diesem Fall wird die Bezeichnung und der Typ (ID/Klasse) des Elternselektors auf den Kindselektor vererbt. Das setzt natürlich eine sehr stringente Bezeichnung voraus.
.blubb {
&-slider {
background: #ff0;
}
}
/* wird zu */
.blubb-slider {
background: #ff0;
}
Uffbasse!
Übergeordnete Selektoren werden nur dann in die CSS-Datei übernommen, wenn sie ebenfalls Werte beinhalten. Also zum Beispiel so:
.blubb {
width: 100%;
&-slider {
background: #ff0;
}
}
/* wird zu */
.blubb {
width: 100%;
}
.blubb-slider {
background: #ff0;
}
Und das gilt immer, nicht nur bei den Platzhaltern sondern ist eine universelle Regel von SCSS. Also merken!
3. Pseudoklassen
a {
&:hover {
text-decoration: underline;
}
&:after {
box-sizing: border-box;
}
}
/* Wird zu */>
a:hover {
text-decoration: underline;
}
a:after {
box-sizing: border-box;
}
4. HTML-Selektoren
Ist zwar möglich aber völlig sinnfrei. So wird aus einem
a {
color: #000;
& {
text-decoration: underline;
}
}
ein
a {
color: #000;
}
a {
text-decoration: underline;
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt