Ausführbare CSS-Docs: CSS Variablen

Q: Was ist :root in CSS?

:root ist eine Pseudoklasse, die das Wurzelelement des Dokuments trifft, in einer HTML-Seite also . Dort deklarierte Variablen erbt jedes Element. Sie hat die Spezifität einer Klasse und schlägt damit einen einfachen html-Selektor.

Q: Wie setzt man einen Standardwert für eine CSS-Variable?

Gib var() ein zweites Argument: color: var(--accent, #2563eb);. Der Fallback greift, wenn --accent weder am Element noch an seinen Vorfahren definiert ist. Er greift nicht, wenn die Variable mit einem Wert definiert ist, der für die Eigenschaft ungültig ist.

Q: Wie ändert man eine CSS-Variable mit JavaScript?

Ruf setProperty am Style eines Elements auf: document.documentElement.style.setProperty('--brand', '#16a34a'). Jede Regel, die var(--brand) verwendet, aktualisiert sich sofort. Den aktuellen Wert liest du mit getComputedStyle(el).getPropertyValue('--brand').

Q: Unterscheiden CSS-Variablen Groß- und Kleinschreibung?

Ja. --Brand und --brand sind zwei verschiedene Variablen, anders als normale Eigenschaftsnamen wie color, bei denen die Schreibweise egal ist.

Eine CSS-Variable deklarieren und verwenden

Eine CSS-Variable, offiziell eine Custom Property, ist eine Eigenschaft, deren Name mit -- beginnt. Du deklarierst sie einmal, meist in :root, damit die ganze Seite sie erbt, und liest sie überall mit var().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS variables</title>
  <style>
    :root {
      --brand: #2563eb;
      --radius: 8px;
      --space: 12px;
    }

    .btn {
      background: var(--brand);
      color: white;
      border: 0;
      border-radius: var(--radius);
      padding: var(--space) calc(var(--space) * 2);
    }

    .card {
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      padding: var(--space);
      margin-bottom: var(--space);
    }
  </style>
</head>
<body>
  <div class="card">Change --brand in :root and both change.</div>
  <button class="btn">Button</button>
</body>
</html>

Ändere --brand in #16a34a, und der Rahmen der Karte und der Button ändern sich gemeinsam. Genau darum geht es: ein Wert, eine Stelle zum Ändern. Variablen lassen sich auch mit calc() kombinieren, wie das seitliche Padding des Buttons zeigt.

Syntax

:root {
  --name: value;         /* declare */
}

.element {
  color: var(--name);                 /* use */
  color: var(--name, #111827);        /* use, with a fallback */
  padding: calc(var(--space) * 2);    /* compute with it */
}

Regel	Detail
Name	Beginnt mit `--`, dann Buchstaben, Ziffern, `-` oder `_`. Groß- und Kleinschreibung zählt: `--Brand` ist nicht `--brand`.
Wert	Fast alles: eine Farbe, eine Länge, eine Liste, ein String. Er wird erst geprüft, wenn er verwendet wird.
Wo deklarieren	In jeder Regel. `:root` für globale Werte, der Selektor einer Komponente für lokale.
Vererbung	Custom Properties werden vererbt, ein Kind sieht also die Werte seiner Vorfahren.
Wo `var()` funktioniert	Nur in Eigenschaftswerten, nicht in Selektoren, Eigenschaftsnamen oder `@media`-Bedingungen.

:root trifft das <html>-Element. Man nimmt es statt html, weil es die Spezifität einer Klasse hat und nach Konvention „globale Einstellungen“ signalisiert.

Geltungsbereich: eine Variable pro Komponente überschreiben

Weil Variablen vererbt werden, ändert eine erneute Deklaration an einem Element den Wert für dieses Element und alles darin. Die Regel, die die Variable verwendet, bleibt gleich.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scope</title>
  <style>
    :root { --accent: #2563eb; }

    .alert {
      border-inline-start: 6px solid var(--accent);
      background: #e5e7eb;
      color: #111827;
      padding: 10px 14px;
      margin-bottom: 8px;
    }

    .alert.success { --accent: #16a34a; }
    .alert.warning { --accent: #f59e0b; }
  </style>
</head>
<body>
  <div class="alert">Info uses the global blue.</div>
  <div class="alert success">Success overrides --accent.</div>
  <div class="alert warning">Warning overrides it too.</div>
</body>
</html>

Die Varianten setzen nur eine Variable, nie den Rahmen selbst. Eine vierte Variante ist eine einzige Zeile.

Fallback-Werte

var(--name, fallback) verwendet den Fallback, wenn die Variable weder am Element noch an einem Vorfahren definiert ist. Alles nach dem ersten Komma ist der Fallback, er darf also selbst Kommas enthalten (var(--font, Georgia, serif)) und auch ein weiteres var() sein.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fallback</title>
  <style>
    p { padding: 8px; color: white; }
    .a { background: var(--missing, #16a34a); }
    .b { --defined: #2563eb; background: var(--defined, #16a34a); }
    .c { background: var(--missing, var(--also-missing, #f59e0b)); }
  </style>
</head>
<body>
  <p class="a">Green: --missing is not defined, fallback used.</p>
  <p class="b">Blue: --defined exists, fallback ignored.</p>
  <p class="c">Amber: nested fallback.</p>
</body>
</html>

Variablen mit JavaScript ändern: ein Theme-Umschalter

JavaScript kann mit style.setProperty() an jedem Element eine Variable setzen. Setz sie an document.documentElement (das <html>-Element), und die ganze Seite folgt. Das häufigere Muster schaltet eine Klasse um, die die Variablen neu definiert:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Theme</title>
  <style>
    :root {
      --bg: #ffffff;
      --text: #111827;
      --muted: #e5e7eb;
    }
    .dark {
      --bg: #111827;
      --text: #f9fafb;
      --muted: #374151;
    }
    body { background: var(--bg); color: var(--text); padding: 12px; }
    .panel { background: var(--muted); padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="panel">
    <p>Theme colors come from three variables.</p>
    <button id="toggle">Toggle dark mode</button>
    <button id="brand">Random text color</button>
  </div>
  <script>
    const root = document.documentElement;
    document.getElementById('toggle').onclick = () => root.classList.toggle('dark');
    document.getElementById('brand').onclick = () => {
      const hue = Math.floor(Math.random() * 360);
      root.style.setProperty('--text', `hsl(${hue} 70% 40%)`);
      console.log(getComputedStyle(root).getPropertyValue('--text'));
    };
  </script>
</body>
</html>

Einen Wert liest du mit getComputedStyle(element).getPropertyValue('--text') zurück. Beachte, dass setProperty einen Inline-Style an <html> schreibt, der die Klasse .dark schlägt. Nach dem Klick auf den zweiten Button bleibt die Textfarbe deshalb in beiden Themes gleich, bis du den Inline-Wert mit root.style.removeProperty('--text') entfernst.

Werte aus dem HTML übergeben

Eine Variable in einem style-Attribut ist der sauberste Weg, Daten pro Element an ein Stylesheet zu übergeben. Das Design bleibt im CSS; das HTML liefert nur eine Zahl.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bars</title>
  <style>
    .bar {
      width: calc(var(--value) * 1%);
      box-sizing: border-box;
      background: #2563eb;
      color: white;
      padding: 4px 8px;
      margin-bottom: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="bar" style="--value: 30">30</div>
  <div class="bar" style="--value: 65">65</div>
  <div class="bar" style="--value: 90">90</div>
</body>
</html>

calc(var(--value) * 1%) macht aus der reinen Zahl einen Prozentwert. Variablen können sich auch innerhalb einer Media Query ändern: @media (min-width: 900px) { :root { --space: 20px; } } lässt jeden Abstand, der --space liest, auf breiten Bildschirmen wachsen.

Die Falle mit ungültigen Werten

Der Browser kann vorher nicht wissen, ob eine Variable einen gültigen Wert für die Eigenschaft enthält, die sie verwendet. Ist er ungültig, fällt die Eigenschaft nicht auf die vorherige Deklaration in der Regel zurück. Sie wird zum Berechnungszeitpunkt ungültig (invalid at computed-value time) und verhält sich, als wäre sie auf unset gesetzt: Vererbte Eigenschaften übernehmen den Wert des Elternelements, alle anderen ihren Anfangswert.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Invalid value</title>
  <style>
    :root { --size: red; } /* not a length */
    .box {
      background: #e5e7eb;
      padding: 12px;
      font-size: 24px;
      font-size: var(--size); /* invalid: 24px is NOT kept */
      border: 4px solid #f59e0b;
      border-width: var(--missing); /* undefined, no fallback */
    }
  </style>
</head>
<body>
  <div class="box">16px text and a 3px border, not 24px and 4px.</div>
</body>
</html>

Der Text erbt 16px von <body>, und border-width fällt auf seinen Anfangswert medium zurück, den Browser als 3px zeichnen. Ohne Variablen wird eine ungültige Deklaration verworfen und die davor bleibt bestehen; mit Variablen ist es dafür zu spät. Ein Fallback hilft nicht, wenn die Variable definiert, aber falsch ist: Der Fallback gilt nur für eine undefinierte Variable.

CSS-Variablen vs. Sass-Variablen

	CSS-Variablen	Sass-Variablen
Syntax	`--brand: #2563eb;` und `var(--brand)`	`$brand: #2563eb;`
Wann aufgelöst	Im Browser, live	Beim Build, im Ergebnis nicht mehr vorhanden
Pro Element ändern	Ja, durch Vererbung	Nein
Mit Klasse oder Media Query ändern	Ja	Nein
Aus JavaScript ändern	Ja	Nein
In Selektoren oder Media-Bedingungen	Nein	Ja

Beide arbeiten gut zusammen: Viele Projekte nutzen Sass für Logik beim Build und geben CSS-Variablen für alles aus, was sich anpassen lassen soll.

Häufige Fehler

Die zwei Bindestriche vergessen. var(brand) und ein als -brand deklariertes --brand funktionieren nicht.
Eine Variable in einer Media Query verwenden. @media (min-width: var(--bp)) ist ungültig. Media-Bedingungen brauchen feste Werte.
Erwarten, dass die frühere Deklaration eine ungültige Variable überlebt. Tut sie nicht; siehe die Falle oben.
Einheiten falsch kombinieren. --gap: 10; und dann margin: var(--gap)px ergibt nicht 10px. Nimm calc(var(--gap) * 1px) oder speichere 10px.
Am falschen Element deklarieren. Eine an .card deklarierte Variable sehen weder Geschwister noch Elternelement; gemeinsame Werte deklarierst du in :root.

Häufig gestellte Fragen

Wie deklariert man eine CSS-Variable?

Schreib in einer Regel eine Eigenschaft, deren Name mit zwei Bindestrichen beginnt, für einen globalen Wert meist in :root: :root { --brand: #2563eb; }. Lesen kannst du sie überall mit var(--brand), zum Beispiel color: var(--brand);.

Was ist :root in CSS?

:root ist eine Pseudoklasse, die das Wurzelelement des Dokuments trifft, in einer HTML-Seite also <html>. Dort deklarierte Variablen erbt jedes Element. Sie hat die Spezifität einer Klasse und schlägt damit einen einfachen html-Selektor.

Wie setzt man einen Standardwert für eine CSS-Variable?

Gib var() ein zweites Argument: color: var(--accent, #2563eb);. Der Fallback greift, wenn --accent weder am Element noch an seinen Vorfahren definiert ist. Er greift nicht, wenn die Variable mit einem Wert definiert ist, der für die Eigenschaft ungültig ist.

Wie ändert man eine CSS-Variable mit JavaScript?

Ruf setProperty am Style eines Elements auf: document.documentElement.style.setProperty('--brand', '#16a34a'). Jede Regel, die var(--brand) verwendet, aktualisiert sich sofort. Den aktuellen Wert liest du mit getComputedStyle(el).getPropertyValue('--brand').

Was ist der Unterschied zwischen CSS-Variablen und Sass-Variablen?

Sass-Variablen werden beim Kompilieren des Stylesheets durch ihre Werte ersetzt und können sich im Browser nicht ändern. CSS-Variablen leben im Browser: Sie werden vererbt, können sich pro Element unterscheiden, reagieren auf Media Queries und Klassen und lassen sich aus JavaScript ändern.

Unterscheiden CSS-Variablen Groß- und Kleinschreibung?

Ja. --Brand und --brand sind zwei verschiedene Variablen, anders als normale Eigenschaftsnamen wie color, bei denen die Schreibweise egal ist.

Verwandte Konzepte