EMZETT.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:
Ergebnis
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
Ergebnis
Dunkelmodus und Themes mit Variablen
Ergebnis
JavaScript kann Variablen setzen: element.style.setProperty("--farbe", "red") und lesen: getComputedStyle(el).getPropertyValue("--farbe").
calc(): rechnen mit gemischten Einheiten
Ergebnis
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 |
Ergebnis
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 |
Ergebnis
Registrierte Eigenschaften
Mit @property bekommt eine Variable einen Typ, einen Startwert und lässt sich dadurch sogar animieren:
Ergebnis
Merke
- Variablen:
--name: wert;definieren,var(--name, rückfall)benutzen; auf:rootglobal - Themes (Dunkelmodus) durch Überschreiben der Variablen
calc()mischt Einheiten,min(),max(),clamp()begrenzen Wertecolor-mix(),attr(),counter()erweitern CSS um Rechnen und Zählen- JavaScript kann Variablen mit
style.setPropertyändern
Aufgabe
Lege eine Farbpalette und Abstandsstufen als Variablen an und baue einen Hell/Dunkel-Schalter, der alle Farben ändert.