SCSS - Schachtelung
1. Und nun das Beste
In SCSS kann man nach Belieben verschachteln und spart sich damit Tipparbeit ohne Ende. Ihr alle kennt doch solche Orgien wie
nav.topmenue li {
...
}
nav.topmenue li a {
...
}
nav.topmenue li a span {
...
}
nun, das geht bei SCSS auch ein wenig einfacher. Nämlich so.
nav.topmenue {
...
li {
...
a {
...
span {
...
}
}
}
}
Und bei der Tiefe gibt es meines Wissens nach auch keine Beschränkungen. Allerdings sollte man es nicht übertreiben.
2. Kontext-Selektoren
Auch hier kann man die Verschachtelung ohne Probleme anwenden.
nav > {
ul {
color: #f00;
}
h1 {
color: #000;
}
}
/* wird zu */
nav > ul {
color: #f00;
}
nav > h1 {
color: #000;
}
Obacht
Bei den Kontext-Selektoren darf man dem Elternelement keine eigenen Anweisungen verpassen. Leider wirft der Präprozessor wie bei den Abkürzungen keine Meldung aus, wenn ihr Mist baut.
nav > {
margin: 0;
ul {
color: #f00;
}
}
/* wird zu */
nav > {
margin: 0;
}
nav > ul {
color: #f00;
}
Und das nav > { ... ] ist natürlich völliger Tinnef.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt