CSS-Variablen und die Funktionen calc/clamp

Beherrsche Custom Properties, wie sie zur Laufzeit innerhalb der Kaskade aufgelöst werden, und die Funktionen calc() und clamp() für flüssige Oberflächen.

10 Min. · 3 Fragen

Custom Properties sind keine Präprozessor-Variablen. Eine Sass-Variable wird zur Kompilierzeit ersetzt; eine --brand-Property wird zur Laufzeit aufgelöst, nimmt an der Kaskade teil, vererbt sich wie jede andere Property und kann durch eine Media Query, eine Klasse oder JavaScript über setProperty() geändert werden. Genau das ermöglicht dynamisches Theming, einen Dark Mode ohne erneute Kompilierung und die Kommunikation zwischen CSS und JS ohne ein erneutes Rendern.

:root {
  --brand: #6c5ce7;
  --spacing: 8px;
}

.card {
  color: var(--brand);
  padding: calc(var(--spacing) * 2);
  border-color: var(--accent, currentColor);
}

Das zweite Argument von var() ist ein Fallback-Wert, der nur verwendet wird, wenn die Property nicht definiert ist. Klassische Falle: Wenn --accent den Wert 12px hat und du ihn in color einsetzt, wird der Fallback nicht verwendet. Die Deklaration wird zum Zeitpunkt der Wertberechnung (computed-value time) ungültig: Die Property fällt auf ihren geerbten oder initialen Wert zurück, nicht auf die vorherige Deklaration, wie es bei einem gewöhnlichen Syntaxfehler der Fall wäre.

Die @property-Regel behebt zwei große Einschränkungen: Sie gibt der Variablen einen Typ (und damit eine Validierung) und macht sie animierbar, denn die Engine weiß nun, wie sie zwischen zwei typisierten Werten interpolieren kann, statt die Variable als undurchsichtige Zeichenkette zu behandeln.

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.gauge {
  background: conic-gradient(
    var(--brand) var(--progress),
    #e5e7eb 0
  );
  transition: --progress 0.4s ease-out;
}

.gauge.is-full {
  --progress: 100%;
}

Auf der mathematischen Seite erlaubt calc() das Mischen von Einheiten (calc(100% - 2rem)), was mit einem Präprozessor unmöglich ist, da die Auflösung vom Rendering-Kontext abhängt. clamp(min, ideal, max) ist syntaktischer Zucker für max(min, min(ideal, max)) und schlägt ganze Stapel von Breakpoints bei flüssiger Typografie: Der Idealwert, oft in vw oder cqi ausgedrückt, gleitet frei zwischen den beiden Grenzen.

:root {
  --fluid-title: clamp(
    1.5rem,
    1rem + 2.5vw,
    3rem
  );
}

h1 {
  font-size: var(--fluid-title);
  max-width: clamp(20ch, 60%, 65ch);
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was passiert, wenn color: var(--gap) ausgewertet wird, während --gap den Wert 12px hat?
   • Die Deklaration wird ignoriert und die vorherige color-Regel greift
   • Die Deklaration wird zum Zeitpunkt der Wertberechnung ungültig und color wird zu unset aufgelöst
   • Der Browser wandelt 12px in eine fast schwarze Farbe um
   • In der Konsole wird ein Fehler geworfen und das Stylesheet wird abgelehnt
2. Wozu ist clamp(1rem, 2.5vw, 2rem) streng genommen äquivalent?
   • max(1rem, min(2.5vw, 2rem))
   • min(1rem, max(2.5vw, 2rem))
   • calc(1rem + 2.5vw + 2rem)
3. Was ist der Hauptvorteil von @property gegenüber einer gewöhnlichen Custom Property?
   • Sie macht die Variable von JavaScript aus zugänglich
   • Sie erlaubt, die Variable innerhalb eines calc() zu verwenden
   • Sie gibt der Variablen einen Typ, was sie insbesondere in Animationen interpolierbar macht
   • Sie zwingt die Variable, sich im gesamten Dokument zu vererben