Optische Varianzen mit SCSS-Maps umsetzen

in  Basics , , , ,

Optische Varianzen mit SCSS-Maps umsetzen

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.

Natürlich könnte man alle Definitionen, die zu einer einzelnen Variante gehören, in ein separates Stylesheet auslagern, damit werden jedoch die zueinander gehörigen Teile eines Stils auf mehrere Punkte verteilt, was die Übersicht und Wartung erschwert.

Maps to the rescue

In SASS/SCSS können Maps eingesetzt werden, um Collections umzusetzen.

Um die oben genannten Jahreszeiten mit ihren Akzentfarben zu definieren, kann eine Map wie folgt eingesetzt werden:

1
2
3
4
5
6
7
8
$summer-yellow: yellow;

$season-colors: (
    spring: green,
    summer: $summer-yellow,
    autumn: brown,
    winter: blue
);

Um nun auf einen gewünschten Wert zuzugreifen, kann die Direktive map-get() verwendet werden:

1
2
3
body.spring article h2 {
    color: map-get($season-colors, "spring");
}

Damit ist allerdings noch nicht viel gewonnen, was die Prägnanz des Codes betrifft. Das ändert sich jedoch in dem Moment, in dem die Map mit einer Schleife durchlaufen wird.

1
2
3
4
5
@each $season, $accent in $season-colors {
    body.#{$season} article h2 {
        color: $accent;
    }
}

Im fertigen CSS ergibt dies dann die Ausgabe, welche anfangs gezeigt wurde.

Weitere Beiträge in Kategorie Basics

Git spielend im Griff
- Eine schöne interaktive Möglichkeit, einige Konzepte von Git näher kennen zu lernen, bietet die Seite Learn Git Branching. In diesem Spiel werden in unterschiedlichen Tutorials und Aufgaben die …
Sektionen zum Ein- und Ausklappen ohne JavaScript und in Markdown nutzen
- Der HTML5-Standard bietet einige Tags, mit denen sich interaktive Elemente abbilden lassen. Ein sehr nützliches Beispiel sind die Tags <details> und <summary>: sie erlauben die Erstellung …
Lesetipp: das Buch zu Symfony 5 auf deutsch
- Das Buch “Symfony 5: The Fast Track” von Fabian Potencier zeigt anhand praktischer Beispiele einen großen Teil der Bandbreite der Symfony-Komponenten. Es eignet sich daher für einen …
CSS-Konzepte spielerisch lernen
- Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten. Mit der Umstellung von …
Twig: kleine Syntax-Anpassung mit deutlichem Einspareffekt
- Der folgende Tipp hilft dabei, den Code-Umfang häufiger Abfragen in Twig-Templates zu reduzieren. Dies verbessert die Lesbarkeit enorm und hilft dabei, die Logik in den Templates intuitiver zu …