var() – CSS Variable (Custom Properties)

CSS var – Custom Properties

Variablen werden für Eigenschaften definiert, die auf mehrere Elemente wirken und durch eine einzige Änderung im ganzen Stylesheet überschrieben werden. Variablen sind ein offizieller Teil der CSS-Spezifikation und heißen dort CSS Custom Properties – »selbstgemachte« oder »eigene« Eigenschaften.

:root {
	--unit: 1rem;
	--padding: calc(var(--unit) * 2);
	--me-color: cornflowerblue;
}

.top-menu h1 {
  color: var(--me-color);
}

Die modernen Browser (ab Firefox 31+, Chrome 49+, Safara 9.1+, Opera 36+, Edge 15) unterstützen »natürliche« CSS-Variablen bereits, ausgenommen die üblichen Verdächtigen (IE11 und älter).

Eigene CSS-Variablen

CSS Custom Properties bescheren uns mit einem großen Schritt zu einem flexiblen Design und eröffnen schnelle und einfache Änderungen wichtiger Größen und Eigenschaften. Sie steigern die Effizienz und optimieren dass CSS.

Die Zahl der Spalten ist anfangs 3 – und soll auf 4 oder 5 oder 6 Spalten erhöht werden. Nur ein CSS-Wert muss geändert werden. Die Variable --space berechnet den verfügbaren Platz der Spalten im Layout, --columnWidth die Breite der Spalten.

.grid {
	--columns: ;
	--gaps: calc(var(--columns) - 1 );
	--space: calc(100% - var(--gaps) * var(--unit));
	--columnWidth: calc(var(--space) / var(--columns));
	display: flex;
	flex-wrap: wrap;
	gap: var(--unit);
}

.cell {
	width: var(--columnWidth);
	height: 50px;
	background-color: var(--me-color);
}

CSS-Variablen vs Präprozessor-Variablen

Gegenüber den CSS-Präprozessoren SASS und LESS wirken CSS Custom Properties schlicht und einfach gestrickt. Aber sie verringern Wiederholungen in langen CSS-Dateien durch globale Vereinbarungen. Sie bewähren sich beim Festlegen von Farben und Farbnuancen und zusammen mit CSS calc für die Berechnung von Breite und Höhe.

• Die Browser werten Variablen oder Custom Properties direkt im CSS aus. Das CSS der Präprozessoren SASS und LESS hingegen muss erst in Standard-CSS übersetzt werden.
• Javascript kann auf CSS-Variablen direkt zugreifen und sie on the fly ändern. Da das CSS der Präprozessoren zuerst übersetzt werden muss, hat Javascript nur das finale CSS im Griff.

  document.querySelector (".grid").style.setProperty("--columns", cols);
  

Nachdem der :not()-Selektor in CSS bereits zuverlässig von allen modernen Browsern unterstützt wird und der :has()-Selektor in Safari eingetroffen ist, schwindet der Vorsprung von SASS dahin. Was uns noch fehlt, sind verschachtelte oder nested Selektoren.

div#navigation {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			i {
				margin-right: 5px;
			}
		}
	}
}

Wer mit der HTML-Struktur vertraut ist, liest die SASS-Anweisung einfacher als die CSS-Umsetzung.

div#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
div#navigation ul li i {
	margin-right: 5px;
}

Quelle: Why you shouldn't use SASS.

Variablen deklarieren und abrufen

Variablen werden in einem CSS-Selektor definiert, der den Gültigkeitsbereich (Scope) festlegt. body, :root und * deklarieren z.B. einen globalen Gültigkeitsbereich. also das gesamte CSS.

Der Name der CSS Variablen beginnt mit zwei Bindestrichen (--) und ist case sensitiv, also empfindlich gegenüber Groß- und Kleinschreibung. "--me-color" und "--me-Color" sind also unterschiedliche Eigenschaften bzw. Variablen. Der Präfix "me" dient nur der Lesbarkeit.

:root {
  --me-color: hsl(350,50%,50%);
}

deklariert eine globale Variable --me-color mit dem Wert hsl(350,50%,50%). Die Funktion var() verweist auf die Variable.

.top-menu h1 {
  color: var(--me-color);
}

Zwischen var und der öffnenden runden Klammer darf kein Leerzeichen sitzen!

Und selbst das Festlegen eines einfaches Wertes funktioniert mit CSS-Variablen (für die Liebhaber von HSL-Farben).

* {
	--me-hue: 180;
}

.excerpt { background: hsla(var(--me-hue), 50%, 50%, 0.2); }

Die var()-Funktion

Die var()-Funktion holt den Wert einer Variablen. Zwischen den runden Klammern können Fallback-Werte geschrieben werden (falls die Variable nicht erreicht wird). Fallback-Werte sind eine von Kommas getrennte Liste, die von der Funktion zu einem Wert zusammengesetzt wird.

var(--my-fonts, "Helvetica Neue", "Helvetica", "Arial", "sans-serif");

In einer Variablen können auch Kurzschriften gespeichert werden. Die Werte für CSS margin und border werden von Haus auch nicht durch Kommas getrennt, sondern durch Leerzeichen.

.bg {
  --margin: 1em auto;
  --frame: 0px 1px 5px 1px;
}

.mystyle { border: var (--frame), 4px 8px; } 

Cascading

CSS Variablen oder Custom Properties befolgen die Regeln der CSS-Kaskade und Vererbung.

<style>
:root { --me-hue: 180; }
.wrap { color: hsl(var(--me-hue), 30%, 40%); }
.bg { background: hsl(var(--me-hue), 50%, 90%); }
</style>

<div class="wrap">
   <p>Dieses p liegt unter div.wrap erbt seine Farbe von .wrap</p>
   <div class="excerpt">
      <p>Dieses p liegt unter .excerpt > .wrap. 
         excerpt vererbt dem p die Hintergrundfarbe.</p>
   </div>
</div>

Keine Custom Properties für Breakpoints

CSS Variablen können nur für die Werte von Eigenschaften eingesetzt werden, aber nicht als Selektoren oder Klassennamen. Auch für Breakpoints kann die CSS var-Funktion nicht verwendet werden (wie schade …).

:root {
  --mobile-medium: 679px;
}

@media (max-width: var(--mobile-medium)) {

}

In Media Queries können Custom Properties nicht verwendet werden. Die CSS Variable im Beispiel gilt für :root, also das html-Element, und wird an andere Elemente vererbt. Aber Media Queries sind keine Elemente und erben nichts von <html> – der Ansatz funktioniert darum nicht ohne CSS Preprocessor.

Mit einem kleinen Umweg bekommen Custom Properties die Breakpoint doch auch ohne CSS-Preproceesor in den Griff:

:root {
	--spacer: 1.5em;
}

section {
	margin-bottom: var(--spacer);
}

@media (min-width: 680px) {
	:root {
		--spacer: 2em;
	}
}

@media (min-width: 1024px) {
	:root {
		--spacer: 4em;
	}
}

CSS mit Javascript abfragen

Die Javascript-Methode window.getComputedStyle() gibt die endgültige CSS-Eigenschaft eines Elements zurück – auch bei Eigenschaften, die auf CSS-Variablen beruhen.

.bg { 
   background: hsl(var(--me-hue), 50%, 90%);
   padding: 1em; 
}

var elem     = document.querySelector(".bg");
var elemProp = window.getComputedStyle(elem, null).getPropertyValue("background").trim();

document.querySelector(".msg").innerHTML = "Computed Style für elem " + elemProp;

How to Get and Set CSS Variable Values with JavaScript

CSS Variable mit Javascript ändern

Auch das funktioniert: Eine CSS Variable mit Javascript ändern. Hier offenbar sich die volle Schönheit der CSS Variablen, denn die Änderung ist einfach und vermeidet die Suche nach allen Beteiligten.

:root {
  --time: 6s;
}

root.style.setProperty('--time', duration + "s");