CSS Variabeln und die calc-Funktion

Worum geht´s?
In diesem CSS Tutorial lernen wir, wie man in CSS Variabeln einsetzt und was ihre Vorteile sind. Außerdem schauen wir uns die Funktion calc etwas genauer an.
1. Warum wir in CSS Variabeln einsetzen
Wenn es sich um eine größere Website handelt, beinhaltet unsere style.css womöglich gar nicht so wenige CSS-Selektoren, mit unzähligen CSS-Befehlen.
Eine Website entsteht üblicherweise nicht an einem einzigen Tag, sondern über mehrere Wochen, Monate oder sogar Jahre. Und so finden sich innerhalb der einzelnen CSS-Selektoren oft ähnliche Angaben, zum Beispiel zu Farben oder bestimmten Größen-Angaben.
Wäre es nicht schön, wenn wir beispielsweise gleiche Farben innerhalb verschiedener CSS-Selektoren an nur einer Stelle ändern müssten, um sie in allen CSS-Selektoren abzuändern?
Natürlich könnten wir mit STRG + F einfach alle Vorkommnisse dieser Farben in unserer style.css suchen und ersetzen.
Aber das ist einerseits umständlich, andererseits auch fehleranfällig. Werden beispielsweise auf diesem Weg alle Vorkommnisse der Farbe #aa32af mit der Farbe #bb212d ersetzt, und später kommt man drauf, dass man das wieder zurückändern will, so kann es mit dieser Methode passieren, dass man dabei auch die CSS-Selektoren zurückändert, die ursprünglich nicht die erste Farbe hatten.
Mittlerweile gibt es was viel besseres: CSS Variabeln.
2. Was sind Variabeln in CSS?
Variabeln in CSS sind – wie in jeder anderen Programmiersprache – gewissermaßen „Platzhalter“ für die eigentlichen Werte mit bestimmten Namen.
Die Variable mit dem Namen „ort“ könnte z.B. den Wert „Linz“ in sich tragen, und später im Programmcode ändert sich ihr Wert zu „Wien“. Ihr Name jedoch bleibt gleich, nämlich „ort“.
In CSS lassen sich dann z.B. Variabeln mit den Namen „textFarbe“ denken, die dann z.B. den Wert „#22aabb“ haben könnten.
Anstatt dann innerhalb eines CSS-Selektors „color: #22aabb;“ zu schreiben, schreiben wir entsprechend „color: textFarbe;“ stattdessen.
Wenn wir nun die Variable „textFarbe“ auf eine andere Farbe abändern, wird die Änderung in die neue Farbe automatisch in allen CSS-Selektoren, die die CSS Variable verwendet haben, übernommen.
Wobei, nicht ganz. Die Syntax (=Schreibweise) funktioniert in CSS ein bisschen anders.
Aber das wäre das Prinzip dahinter.
Und nun lernen wir, wie wir in CSS Variabeln korrekt einsetzen.
3. Wie wir in CSS Variabeln verwenden
Nehmen wir an, wir haben in unserer index.html folgenden HTML-Code:
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Überschrift</h1> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>
Außerdem haben wir in usnerer style.css folgenden CSS-Code:
div { width: 300px; height: 200px; border: 2px solid purple; } #div1 { background-color: #22aadd; } #div2 { background-color: #22aadd; } #div3 { background-color: #22aadd; } h1 { background-color: #22aadd; }
Das Ergebnis im Browser sind die Überschrift samt den 3 DIVs jeweils in der entsprechenden Hintergrundfarbe #22aadd:
Wollen wir nun die Hintergrundfarbe in #div1, #div3 und h1 ändern, so können wir z.B. folgendes versuchen:
#div1, #div3, h1 { background-color: #da3ace; }
Das funktioniert zwar, aber nur deswegen, weil es sich hierbei um ein kleines Mini-Beispiel handelt:
Normalerweise werden die h1-Überschriften und die DIVs zusätzlich zu den bestehenden noch sehr viele weitere CSS-Befehle bekommen, die nicht immer gleich sein werden. Sie derart zusammenzufassen ist daher eher aufwändig.
Stattdessen werden wir nun CSS Variabeln verwenden.
Wir beginnen damit, unsere Variabeln in CSS anzulegen:
3.1 Wie wir in CSS Variabeln anlegen
Der übliche Zugang, CSS Variabeln anzulegen, ist es, den CSS-Selektor :root zu benutzen:
:root { --textFarbe: #da3ace; --hintergrundFarbe: #ad3d39; }
Im obigen Beispiel werden 2 CSS Variabeln angelegt, eine mit dem Namen –textFarbe, eine mit dem Namen –hintergrundFarbe.
Die beiden — sind dabei kein Tippfehler, sondern notwendig. So weiß CSS, dass es sich dabei um eine Variable handelt.
Du kannst in den :root-Selektor so viele CSS Variabeln einfügen, wie du willst. Wichtig ist nur, dass sie
- mit einem doppelten Bindestrich beginnen und
- einen einzigartigen Namen besitzen.
Aber wie können wir unsere Variabeln in CSS jetzt auch nutzen?
Das bringt uns zum nächsten Punkt: Wie du in CSS den Wert von Variabeln ausliest.
3.2 Wie du den Wert der Variabeln ausliest und verwendest
Wenn du nun z.B. eine Variable verwenden willst, um die Textfarbe in mehreren CSS-Selektoren zu setzen, dann verwendest du in all diesen CSS-Selektoren unsere CSS Variable. Und das machst du in etwa so:
:root { --textFarbe: #da3ace; } div { width: 300px; height: 200px; border: 2px solid purple; } #div1 { background-color: var(--textFarbe); } #div2 { background-color: #22aadd; } #div3 { background-color: var(--textFarbe); } h1 { background-color: var(--textFarbe); }
Wenn du nun im :root-Selektor die Variable –textFarbe änderst, z.B. auf „orange“, ändern sich alle über die Variable verknüpften CSS-Selektoren entsprechend mit:
Das gleiche Prinzip kannst du nicht nur für Farben einsetzen, sondern z.B. auch für Längen (200px, 40%, …) oder sonstige Werte.
Im allerbesten Fall hast du am Ende in deiner .css-Datei im :root-Selektor sozusagen das „Hauptquartier“ aller Änderungen:
- Die Marken-Farbe hat sich verändert?
- Die Schriften sollen sich ändern?
- Irgendwelche Abstände passen nicht mehr?
Einfach im :root-Selektor entsprechend anpassen.
Aber es gibt noch einen Vorteil, CSS Variabeln einzusetzen: Koheräntes Design.
4. Wie du Variabeln in CSS noch sinnvoll einsetzen kannst
Wenn du dir schon vor dem Design deiner Website überlegst, wie viele verschiedenen Farben, Schriften etc. das Design aufweisen soll/darf, kannst du diese bevor du mit dem Rest beginnst als Variabeln definieren.
So kannst du ein Grundgerüst deines späteren Designs aufbauen, das du mit Hilfe von CSS Variabeln später auf allereinfachste Weise anpassen und in verschiedensten Varianten durchprobieren kannst.
Wenn du merkst, dass du mehr als maximal 10-20 Variabeln benützt, ist dein Website-Design womöglich einfach noch zu komplex, und sollte vereinfacht werden.
Richtig eingesetzt erleichtern dir CSS Variabeln einerseits die Erstellung deiner Website. Vor allem aber ersparen sie dir unendlich viel Mühe in der Wartung und Abänderung deiner Website.
Und wo wir schon bei erleichterten Automatisierungen sind: Lass uns bei der Gelegenheit gleich noch die calc-Funktion ansehen.
5. Was ist der calc-Befehl in CSS?
Der calc-Befehl steht für „calculation“ und ermöglicht es dir, Berechnungen innerhalb von CSS anzustellen.
Was, wenn du z.B. eine Breite von 100% für dein DIV willst, aber minus 40 Pixeln?
Der calc-Befehl ist dein Freund:
#div2 { width: calc(100% - 40px); }
Grundsätzlich kannst du innerhalb der calc-Funktion die Rechenarten +, -, * und / einsetzen, und alle normalen Einheiten, die du sonst auch einsetzen kannst (also z.B. %, px, vw, vh und so weiter).
Du musst allerdings darauf achten, dass du zwischen den Werten und den Rechen-Zeichen jeweils Leerzeichen setzt.
Sonst kann es sein, dass die calc-Funktion nicht richtig funktioniert.
Viel Freude damit, deine Website mit CSS Variabeln und der calc-Funktion noch weiter zu optimieren und zu automatisieren! 🙂