Variable Definition

Eines der nützlichsten Features von CSS-Präprozessoren ist die Möglichkeit, variable Definitionen von CSS-Werten anzulegen. Gerade bei großen Webseiten passiert es schnell, dass sich im CSS viele Attribute mit gleichen Werten anhäufen. Sei es beispielsweise die Schrift- oder Hintergrundfarbe, die sich durch die ganze Webseite zieht. Das wäre an sich auch gar nicht schlimm, denn in vielen Fällen lassen sich diese Dubletten nicht vermeinden. Der Spaß fängt allerdings erst an, wenn sich diese Werte einmal ändern sollten. Nicht nur, dass man sich durch Unmengen an CSS Klassen kämpfen muss, man muss dabei auch darauf achten, nicht versehentlich Klassen zu ändern, die zufälligerweise die gleichen Werte haben, aber von den Änderungen nicht betroffen sein sollen. Und in diesen Fällen ist #ff0000 nicht sehr aussagekräftig, was dessen Verwendung angeht.

I am :root

Um nun von einer variablen und semantischen Definition zu profitieren, müssen diese Variablen zunächst einmal definiert werden. Dazu nutzen wir die Pseudo-Klasse :root.

:root {
  --main-font-color: red;
}

In dieser Klasse können wir nun unsere Variablen festlegen. Dabei können wir die Namen selbst bestimmen. Lediglich das doppelte Minus am Anfang ist obligatorisch. Auch können die Variablen mit jedem beliebigen Wert versehen werden.

:root {
  --main-font-color: red;
  --main-background-color:blue;
  --main-font-size:green;
  --sub-font-size:16px;
}

Und diese Variablen möchten wir nun in unser CSS einbauen.

Einsatz

Definiert ist nun also alles. Jetzt gilt es, diese Definitionen auch sauber einzusetzen. Dazu verwenden wir var(), das dann mit der entsprechenden Bezeichnung ausgestattet wird. Schauen wir uns das am Beispiel einer tollen Beispiel-Klasse an:

.beispiel {
  font-size:18px;
  color:var(--main-font-color);
  line-height:normal;
  font-weight:normal;
}

Anstatt eines Wertes für das Attribut color setzen wir nun unsere definierte Variable ein. Damit wird an diese Stelle der Wert red eingesetzt. So weit, so bekannt. Wenn wir uns die Klasse nun genauer angucken erkennen wir, dass auch schon eine Variable für die font-size definiert wurde. Diese sollten wir nun auch einbauen, um alles aus unserer :root Klasse rauszuholen:

.beispiel {
  font-size:var(--main-font-size);
  color:var(--main-font-color);
  line-height:normal;
  font-weight:normal;
}

Doch halt, was ist das? Wie das geschulte Webentwickler- und CSS-Enthusiasten-Auge sofort erkennt, stimmt hier etwas nicht. Denn für die Variable –main-font-size ist der Wert green gesetzt. Und dieser Wert ist natürlich, verwendet man ihn für das Attribut font-size, invalide! Verzaget jedoch nicht, denn es gibt eine Lösung für dieses lästige Problem der falsch definierten Variablen. Und zwar in Form eines Fallbacks:

.beispiel {
  font-size:var(--main-font-size, 18px);
  color:var(--main-font-color);
  line-height:normal;
  font-weight:normal;
}

Als zweiten Wert innerhalb unseres var() können wir ein Backup festlegen, welches eingesetzt wird, falls die zuvor verwendete Variable entweder gar nicht, oder für diesen Fall falsch definiert ist. Wichtig ist jedoch an dieser Stelle zu wissen, dass dies kein Workaround für ältere Browser ist, die CSS Variablen noch nicht unterstützen. Diese nutzen dann nämlich nicht, wie vielleicht erhofft, den Fallback-Wert, sondern ignorieren diese Eigenschaft komplett. Und das ist auch schon der ganze Trick dabei. Nie mehr Dubletten im CSS und alles schön sauber und semantisch ausgezeichnet. Zwar können die CSS Variablen LESS und SASS noch lange nicht in die Tasche stecken, für Fans des reinen und echten CSS ist es jedoch ein Schritt in eine noch strahlendere, kaskadierende Zukunft.