Was macht die VAR-Funktion, wie kann man sie anwenden und wann ist sie von Nutzen? Als erstes hatte ich die VAR-Funktion in der CSS bei Daishi's Skripten gesehen, machte mich neugierig!
Was macht die Var-Funktion?
CSS-Variablen können einen globalen oder lokalen Bereich haben.
Globale Variablen können über das gesamte Dokument zugreifen, während lokale Variablen nur innerhalb des Selektors verwendet werden, in dem sie deklariert werden (Div-Container).
Für globale Variablen wäre das oberste Element :root, hier im Forum passt für die meisten Fälle auch body!
Die Namen der Variablen können frei gewählt werden!
Eine gute Möglichkeit CSS-Variablen zu verwenden, ist, um die Farben eines Designs anzupassen. Anstatt die gleichen Farben immer wieder zu kopieren und einzufügen, können sie in Variablen platziert werden!
Es können aber auch Längen und Breiten definiert!
Ein Beispiel für die VAR-Funktion:
Zuerst werden die globalen Variablen definiert --Blau und --Weiß (Zeile 2+3).
Dann verwendet man die Funktion, um den Wert der Variablen später in die CSS einzufügen var(--Blau) (7, 10+18) und var(--Weiß) (Zeile 11+16)!
Möchte man z.B. die Farbe Blau anpassen, ist es nur erforderlich in Zeile 2 den Wert zu ändern und nicht in Zeile 7, 10+18! Möchte man z.B. die Farbe Weiß anpassen, ist es nur erforderlich in Zeile 3 den Wert zu ändern und nicht in Zeile 11+16!