HTML + CSS: CSS-Variablen und Funktionen

Kurz: Mit zwei Bindestrichen definierst du Variablen, mit var() liest du sie. Meist legt man sie auf :root an, dann gelten sie überall:

Teil des Kurses HTML + CSS

Kapitel 22 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Eigene Eigenschaften (Variablen)

Mit zwei Bindestrichen definierst du Variablen, mit var() liest du sie. Meist legt man sie auf :root an, dann gelten sie überall:

<style>
  :root {
    --primaer: #4f46e5;
    --akzent: #f59e0b;
    --abstand: 1rem;
    --radius: 10px;
  }
  .karte {
    background: white;
    border: 2px solid var(--primaer);
    border-radius: var(--radius);
    padding: var(--abstand);
    margin: var(--abstand) 0;
  }
  .karte h3 { color: var(--primaer); margin-top: 0; }
  .karte button { background: var(--akzent); border: 0; padding: .5em 1em; border-radius: var(--radius); }
  body { background: #f1f5f9; }
</style>
<div class="karte"><h3>Karte</h3><button>Aktion</button></div>
<div class="karte"><h3>Noch eine</h3><button>Aktion</button></div>

Vorteile: Ein Wert an einer Stelle ändern, überall wirkt er. Variablen sind live: Sie lassen sich mit Media Queries, JavaScript und innerhalb von Komponenten ändern.

Rückfallwert und Überschreiben

<style>
  :root { --farbe: tomato; }
  .a { color: var(--farbe); }
  .b { color: var(--gibts-nicht, seagreen); }       /* Rückfallwert */
  .c { --farbe: royalblue; color: var(--farbe); }   /* lokal überschrieben */
  .c .innen { color: var(--farbe); }                /* Kinder erben die lokale Variable */
</style>
<p class="a">Aus :root (tomato)</p>
<p class="b">Mit Rückfallwert (seagreen)</p>
<div class="c"><p class="innen">Lokal überschrieben (royalblue)</p></div>

Dunkelmodus und Themes mit Variablen

<style>
  :root { --bg: #fff; --text: #111; --card: #f1f5f9; }
  [data-theme="dunkel"] { --bg: #0f172a; --text: #f1f5f9; --card: #1e293b; }
  body { background: var(--bg); color: var(--text); font-family: system-ui; padding: 1rem; transition: background .3s, color .3s; }
  .card { background: var(--card); padding: 1rem; border-radius: 8px; margin-top: 1rem; }
</style>
<button id="umschalter">Design wechseln</button>
<div class="card">Eine Karte, die dem Design folgt.</div>
<script>
  document.getElementById("umschalter").onclick = () => {
    const html = document.documentElement;
    html.dataset.theme = html.dataset.theme === "dunkel" ? "" : "dunkel";
  };
</script>

JavaScript kann Variablen setzen: element.style.setProperty("--farbe", "red") und lesen: getComputedStyle(el).getPropertyValue("--farbe").

calc(): rechnen mit gemischten Einheiten

<style>
  .seite { display: flex; height: 100px; gap: 8px; }
  .seitenleiste { width: 120px; background: #fecaca; }
  .inhalt { width: calc(100% - 120px - 8px); background: #bbf7d0; }   /* mischt % und px */
  .abstand { padding: calc(1rem + 2vw); background: #bfdbfe; margin-top: 8px; }
</style>
<div class="seite"><div class="seitenleiste">120px</div><div class="inhalt">Rest</div></div>
<div class="abstand">Padding aus calc(1rem + 2vw)</div>

Innerhalb von calc() müssen um + und - Leerzeichen stehen. Auch * und / sind erlaubt.

min(), max() und clamp()

Funktion	Bedeutung
min(a, b)	der kleinere Wert
max(a, b)	der größere Wert
clamp(min, bevorzugt, max)	Wert zwischen Grenzen

<style>
  .breit { width: min(90%, 500px); background: #e9d5ff; padding: 8px; margin: 6px auto; }     /* höchstens 500px */
  .schrift { font-size: clamp(1rem, 2.5vw, 2rem); }                                            /* flüssig */
  .abstand { padding: clamp(8px, 3vw, 32px); background: #fed7aa; }
</style>
<div class="breit">Breite = min(90%, 500px)</div>
<p class="schrift">Flüssige Schriftgröße mit clamp()</p>
<div class="abstand">Flüssiger Abstand</div>

Weitere nützliche Funktionen

Funktion	Zweck
attr(data-x)	Attributwert in content einsetzen
url()	Dateien einbinden
rgb(), hsl(), oklch(), color-mix()	Farben bilden und mischen
repeat(), minmax(), fit-content()	Grid
translate(), rotate(), scale()	Transformationen
blur(), brightness(), grayscale()	Filter
counter()	automatische Zähler

<style>
  :root { --marke: #7c3aed; }
  .a { background: var(--marke); color: white; padding: 8px; }
  .b { background: color-mix(in srgb, var(--marke) 50%, white); padding: 8px; }
  .c { background: color-mix(in srgb, var(--marke), black 30%); color: white; padding: 8px; }
  [data-tip]::after { content: " (" attr(data-tip) ")"; color: #64748b; font-size: .8em; }
  ol.kap { counter-reset: kap; list-style: none; padding: 0; }
  ol.kap li::before { counter-increment: kap; content: "Kapitel " counter(kap) ": "; font-weight: bold; }
</style>
<div class="a">Marke</div><div class="b">Hell gemischt (50 % weiß)</div><div class="c">Dunkel gemischt (30 % schwarz)</div>
<p data-tip="Zusatzinfo">Text mit attr()</p>
<ol class="kap"><li>Einleitung</li><li>Hauptteil</li><li>Schluss</li></ol>

Registrierte Eigenschaften

Mit @property bekommt eine Variable einen Typ, einen Startwert und lässt sich dadurch sogar animieren:

<style>
  @property --winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
  .kreis {
    width: 80px; height: 80px; border-radius: 50%;
    background: conic-gradient(from var(--winkel), #6366f1, #ec4899, #6366f1);
    animation: drehen 4s linear infinite;
  }
  @keyframes drehen { to { --winkel: 360deg; } }
</style>
<div class="kreis"></div>

Merke

• Variablen: --name: wert; definieren, var(--name, rückfall) benutzen; auf :root global
• Themes (Dunkelmodus) durch Überschreiben der Variablen
• calc() mischt Einheiten, min(), max(), clamp() begrenzen Werte
• color-mix(), attr(), counter() erweitern CSS um Rechnen und Zählen
• JavaScript kann Variablen mit style.setProperty ändern

Übungsaufgabe

Lege eine Farbpalette und Abstandsstufen als Variablen an und baue einen Hell/Dunkel-Schalter, der alle Farben ändert.

Quiz zur Selbstkontrolle

Wie liest du eine CSS-Variable?

• var(—name) (richtig)
• $name
• @name
• get(—name)

Was macht clamp(1rem, 3vw, 2rem)?

• Liefert 3vw, aber nie kleiner als 1rem und nie größer als 2rem (richtig)
• Rechnet 1 + 3 + 2
• Wählt zufällig
• Begrenzt die Höhe auf 1rem

Wo definiert man globale Variablen?

• Auf :root (richtig)
• In body nur
• In head
• In @media nur

Weiter im Kurs

Zurück: Responsive Webdesign

Weiter: Übergänge, Transformationen und Animationen

Alle Kapitel: HTML + CSS im Überblick