Get the MOST

In vielen Weblayouts ist es notwendig, unterschiedliche Ausprägungen einer bestimmten kosmetischen “Stellschraube” zu realisieren. So können etwa einzelne Akzentfarben je nach Unterseite, Kategorie oder Jahreszeit abweichen. Dies sorgt oftmals für unschönen Boilerplate-Code, welcher jedoch mit SASS/SCSS einfach eingespart werden kann.

Erst einmal ausführlich

Angenommen, je nach body-Klasse sollen alle Artikel-Überschriften in der zweiten Ebene eine andere Farbe erhalten. Dies könnte mit reinem CSS zum Beispiel so aussehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

body.spring article h2 {
    color: green;
}
body.summer article h2 {
    color: yellow;
}
body.autumn article h2 {
    color: brown;
}
body.winter article h2 {
    color: blue;
}

Für diesen einen Fall fällt die Redundanz vielleicht nicht ins Gewicht, aber wenn sich solche Ausprägungen durch ein ganzes Layout ziehen, wird der Wunsch nach einer überschaubareren Alternative stärker.