An dieser Stelle haben wir vor zwei Wochen SASS vorgestellt. Was Sass ist und wie man es benutzen kann, könnt ihr in Teil 1 nachschlagen. Ein erstes Feature haben wir mit den Sass Variables ebenfalls beschrieben. Heute soll es um das sogenannte Nesting von Selektoren (Nested Rules) gehen. Jeder der schon mal eine Reihe CSS Code produziert hat kennt das Problem:
Unschöne, sich wiederholende, tief verschachtelte Selektoren. Die Verschachtelungen können wir vermeiden, indem wir z. B. möglichst wenige Ausnahmen zulassen. Doch Wiederholungen von Selektoren sind teilweise nicht zu verhindern. Diese treten z. B. auf, wenn in einem Selektor ".meineBox" viele weitere Elemente formatiert werden sollen:
.meineBox {
color: #333;
}
.meineBox .button {
padding: 10px;
}
.meineBox img {
margin: 22px;
}
.meineBox .titel h3 {
overflow: hidden;
}
.meineBox .titel h3 .eineEbeneTiefer {
background: green;
}Mit Sass und den Nested Selectors sieht die gleiche Logik wie folgt aus:
.meineBox {
color: #ccc;
.button {
padding: 10px;
}
img {
margin: 22px;
}
.titel h3 {
overflow: hidden;
.eineEbeneTiefer {
background: green;
}
}
}Die Unterschiede sind deutlich. Spätestens sobald sich der CSS-Coder an die neue, ungewohnte Darstellung von Selektoren, Eigenschaften und Deklarationen gewöhnt hat, möchte er nicht mehr darauf verzichten. Wie bei vielen Dingen im Leben muss man die Vorteile neuer Verfahren und Herangehensweisen erst selbst erfahren, um sie zu schätzen. Fassen wir dennoch die Vorteile der Nested Selectors kurz zusammen:
- Bessere Übersichtlichkeit
- Klarere Struktur
- Weniger, bis kaum Wiederholungen von Eltern-Selektoren
Schon beim Betrachten des Sass-Stylesheets wird klar zu welchem Selektor die Eigenschaften gehören. Die Einrückung verdeutlich zudem die Selektortiefe und schafft eine sichtbar bessere Übersichtlichkeit. Pures CSS kann all das nicht bieten. Einrückungen sind zwar auch hier möglich. Doch es müssen weiterhin Eltern-Selektoren wiederholt werden. Die geordnete Darstellungsart in Nested Selectors macht sich besonders in großen, schon recht unübersichtlichen Stylesheets bezahlt.
Viel Spaß beim Ausprobieren.