Andre Bellmann

CSS Variablen ohne SASS - Wiederverwendbare Variablen in CSS ohne Preprozessoren

Datum:

Seit einiger Zeit kann man CSS Variablen benutzen. Normalerweise brauchte man bisher immer Preprozessoren wie SASS oder LESS dafür. Mit den in CSS integrierten Variablen kann man aber noch viel mehr machen. Beispielsweise mit JavaScript direkt darauf zugreifen und sie verändern. Aber der IE unterstützt das natürlich noch nicht, wäre ja auch zu schön. Hier geht es zum Browsercheck Hier gehts zum Browsercheck

Table of Contents

  1. Wie kann man eine CSS Variable definieren
  2. CSS Variablen in vanilla JavaScript setzen und verändern
  3. Fortgeschrittene Beispiele

Wie kann man eine CSS Variable definieren

CSS Variablen kann man vielfältig einsetzen. Ich persönlich benutze sie für Schriftgrößen, Farben und um die CSS-Eigenschaft translate per JavaScript einfach manipulieren zu können.

Was sind CSS Variablen

CSS Variablen definiert man einmal im CSS an einer zentralen Stelle und benutzt sie dann Seitenweit überall. Durch die Möglichkeit der Manipulation dieser Variablen im Nachhinein, kann man hier ein gutes System schaffen, um so Farben, Größen und andere Eigenschaften zentral zu steuern.

Farben einmal definieren und überall verwenden

Als erstes muss man im :root oder auch innerhalb eines Containers Variablen definieren, dann kann man sie später im CSS oder auch in JavaScript verwenden.

CSS

:root {
  --color: red;
}
h1 {
  color:var(--color);
}
...

Ergebnis

Foo

Verschachteln

Definiert man die Variable im Root, so kann sie im gesamten Dokument verwendet werden. Aber es gibt auch die Möglichkeit diese nur innerhalb eines Containers zu definieren. Das ganze könnte dann so aussehen:

CSS

:root {
  --color: red;
}
p {
  --color: green;
}
h1 {
  color:var(--color);
}

p strong {
  color:var(--color);
}
a {
  background-color:var(--color);
  color:white;
}

Wir definieren im Root eine Farbe, und können das dann innerhalb eines Container überschreiben.

Foo

Ergebnis: Wir haben global die Variable --color als Rot definiert, und überschreiben das für alle im p liegenden Elemente auf die Farbe Grün

CSS Variablen in vanilla JavaScript setzen und verändern

Nicht nur im CSS kann man diese neuen Variablen hervorragend verwenden, man kann sie auch direkt in vanilla JS setzen und verändern. Ich nehme wieder das Beispiel von eben und verändere hier die CSS Variablen per JS. Außerdem habe ich im CSS noch eine weitere CSS-Variable --bg-color verwendet, die aber nicht im CSS gesetzt wird, sondern erst im JS.

CSS

:root {
  --color: red;
}
h1 {
  color:var(--color);
}
p strong {
  color:var(--color);
  background-color: var(--bg-color);
}
a {
  background-color:var(--color);
  color:white;
}

Jetzt verändern wir per JS die Variable --color von Rot zu Blau und außerdem setzen wir hier noch eine neue Variable --bg-color

JS

var body = document.querySelector('body');

/* Change css variable via vanilla js */
body.style.setProperty("--color", "blue");

/* Set a new css variable to root */
body.style.setProperty("--bg-color", "silver");

Ergebnis:

CSS Variablen per JS verändern

Wir können diese Variablen natürlich überall verwenden und per JS manipulieren. So können wir Elemente mit Hilfe von JS und der CSS Eigenschaft translate3d verschieben. Rotate und alle anderen CSS Eigenschaften kann man natürlich genauso manipulieren. Der riesige Vorteil hierbei ist die extrem gute Performance.

CSS

:root {
  --move-x: 1px;
}

.container {
  transform:translate3d(var(--move-x),0,0);
  transition:1s transform ease-in-out;
}

JS

var body = document.querySelector('body');
body.style.setProperty("--move-x", "200px");

In diesem Beispiel habe ich das JavaScript erweitert. Ich habe ein Interval gesetzt, und jedesmal wird per Zufall die Bewegung der X-Achse ermittelt und gesetzt.

Forgeschrittene Beispiele

Tinder-Effekt

iOS Touch Switch Radiobutton

Browser-Support von CSS Variablen

Fazit

Funktionieren CSS Variablen in IE11?

Mit dem Internet Explorer hat man leider Pech. Hier funktionieren die CSS Variablen noch nicht. Mit den CSS-Variablen jedoch lassen sich trotzdem richtig coole Sachen anstellen: Farbveränderungen, Positionsveränderungen oder sogar Inhalte lassen sich jetzt einfach und ohne Probleme via vanilla JS manipulieren.

TAGS:

Navigation