Nachdem ich mich einige Zeit mit CSS-Variablen beschäftigt habe, benutze ich diese immer mehr in Projekten, die ich realisiere. In diesem Beitrag möchte ich euch einmal erklären, was CSS-Variablen sind, was deren Vorteile sind und wie ich diese verwende.
Was sind CSS-Variablen?
Der Name sagt eigentlich schon alles. Mit CSS-Variablen kann man an einer Stelle, Werte speichern, die man im weiteren Ablauf der Programmierung immer wieder abrufen und benutzen kann. Nützlich sind diese Werte, wenn man z.B. bestimmte Farbwerte, Schriftarten oder Schriftgrößen vergeben möchte.
Dadurch habe ich die Möglichkeit, zentral eine Schriftart anzugeben und diese zentral zu verwalten. Auch die Schriftgrößen kann ich zentral abspeichern und bei der Feinjustierung der Webseite zentral anpassen.
Das Deklarieren
Man deklariert eine CSS-Variable ganz einfach wie eine normale CSS-Property, jedoch gibt man hierbei anstelle des Property Namens den Variablennamen mit zwei Minuszeichen davor ein. Ein Beispiel würde zum Beispiel so aussehen:
--global-padding: 15px;Man kann jedoch die Variablen nicht allein stehend deklarieren, sondern diese müssen einem HTML-Element zugeordnet sein. Hierbei ist es sehr beliebt, die CSS-Variablen, die global zugänglich sein sollen, auf das :root Element zu setzen.
:root{
--global-padding: 15px;
}Das :root Element visiert das höhste Elternelement einer Webseite an. In normalen Fällen ist das der html-Tag.
Was CSS-Variablen können
Die Nutzung der Variablen ist ganz einfach. Man gibt einfach var() mit dem gewünschten Variablennamen an. Wenn wir zum Beispiel auf die Variable von oben zugreifen möchten, geben wir folgendes ein:
var(--global-padding);Natürlich gilt auch hier, dass wir die Variable niemals so benutzen würden. Im Realbeispiel würde das wie folgt aussehen:
.box{
padding: var(--global-padding);
}Fallback-Variablen
Bei der Nutzung von CSS-Variablen hat man die Möglichkeit, fallback Variablen zu erstellen. Das bedeutet, dass man beliebig viele alternative Variablen angeben kann, auf die zugegriffen wird, falls die nötige Variable nicht gefunden wurde.
Im folgenden Beispiel lasse ich zum Beispiel für eine Überschrift die primäre Farbe und falls diese nicht vorhanden ist, die sekundäre Farbe nehmen.
color: var(--primary-color, var(--secondary-color));Man hat sogar die Möglichkeit, zu den alternativen Variablen, als letzte Möglichkeit, eine Feste Variable zu definieren.
Im nächsten Beispiel werdet ihr sehen, wie man sie folgende Abfolge realisiert:
- Nimm den Wert der Variable –primary-color
- Falls –primary-color nicht existiert, nimm –secondary-color
- Falls das auch nicht existiert, setze die Farbe #00000 (Schwarz)
color: var(--primary-color, var(--secondary-color, #000000));Rechenoperationen (calc)
Auch Rechenoperationen können mit CSS-Variablen durchgeführt werden. Im Nachfolgenden Beispiel lasse ich eine gesetzte Pixelwert-Variable verdoppeln:
margin-bottom: calc(var(--global-padding) * 2);Was CSS-Variablen nicht können
Es gibt leider zwei schwächen, die CSS-Variablen mit sich bringen. Zum einen ist das die fehlende Kompatibilität bei Media Query Angaben und zum anderen, dass man Variablen nicht zusammenführen kann.
Media Queries
Ich hätte mir gewünscht, dass so etwas möglich wäre:
:root{
--tablet: 768px;
}
@media (min-width: var(--tablet)) { /* Ein bisschen Style */ }Leider ist CSS noch nicht in der Lage, dass man die Variablen in der oben gezeigten Position mitgeben kann. Dafür gibt es eine Alternative und zwar:
:root{
--col-width: 50%;
}
@media (min-width: 768px){
:root{
--col-width: 100%;
}
}String merging
Leider ist es auch nicht möglich, Variablen zu erweitern. Also folgendes ist weder möglich, noch kenne ich eine Alternative hierfür:
:root{
--assets-directory: '../img/assets/';
}
article{
background-image: var(--assets-directory)+"noise.png";
}Javascript und CSS-Variablen
Ihr habt auch die Möglichkeit, per Javascript die Variablen abzurufen und zu manipulieren. Dies kann nützlich sein, wenn man ein jQuery Plugin wie z.B. Scrollmagic nutzt. Hier einmal die Funktionen, um die genannten Funktionen zu realisieren:
let root = document.documentElement;
getComputedStyle(root).getPropertyValue('--background');let root = document.documentElement;
root.style.setProperty('--background', "red");Mein Anwendungsgebiet
Da ich in einer Werbeagentur arbeite, muss ich in die Zukunft denken und dort ist die Benutzung von CSS-Variablen unverzichtbar. Die Grundidee hier hinter ist, dass ich gewisse Module aufbereiten und an vielen Stellen mit CSS-Variablen arbeiten kann. Meine Arbeitskollegen, die exakt den selben Modul benötigen, brauchen am Ende nur den vorgeschriebenen Code kopieren und haben mit minimalistischem Aufwand das Modul in ihr Projekt implementiert.
