CSS variables

Source

Mit CSS-Variablen (offizieller Name: CSS custom properties) können Stylesheets parametrisiert werden, ohne dass eine Vorverarbeitung (beispielsweise mit scss) erforderlich wird. Die Variablen sollten CSS-typische Namen tragen (Kleinbuchstaben mit Bindestrichen gruppiert), die mit zwei Bindestrichen beginnen.

Wenn eine CSS-Variable in einem Element definiert wird, ist sie in dessen Kindelementen verfügbar. Soll sie also global verfügbar sein, definiert man sie zweckmäßigerweise im Root-Element:

:root {
  --main-bg-color: brown;
}

Sollen zusätzlich auch Attribute der Variablen gesetzt werden, kann stattdiessen die at-Regel @property genutzt werden:

@property --main-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: brown;
  }

Ansonsten ist die Vererbbarkeit (inherits:) immer true.

Verwendet werden sie durch Aufruf der Funktion var():

p {
  background-color: var(--main-bg-color);
  }

Dies ist nur in Attributwerten möglich, nicht als (Teil von) Namen oder Selektoren! WeasyPrint lässt Variablen zudem nur als vollständige Attributwerte zu, nicht als Teile von mehrwertigen Attributen.

Auch von JavaScript aus können die Variablen (mit CSS.registerProperty) definiert werden.

Referenzen: