CSS-Variablen in Pure CSS – Erste Schritte in 5 Minuten oder weniger

CSS-Variablen (oder offiziell: benutzerdefinierte Eigenschaften ) in reinem CSS sind eine enorme Zeitersparnis für jeden, der bereit ist, fünf Minuten zu investieren, um zu lernen, wie man sie verwendet. Sie gibt es seit CSS3, und 92 % aller Benutzer haben Browser, die sie unterstützen. Die Verwendung von CSS-Variablen erfordert keine wesentlichen Änderungen an bestehenden Stylesheets oder neuen Tools und kann problemlos auf alte Projekte angewendet werden. Anstatt einen Hex-Farbcode an Hunderten von Stellen in einer Datei aufschreiben zu lassen, können Sie ihn an nur einer Stelle definieren lassen – mit einer CSS-Variablen. Eine enorme Zeitersparnis und Hilfe dabei, Stylesheets konsistenter zu machen.

Warten Sie, das ist also Saas oder weniger, richtig?

Nein, wir sprechen hier von reinem CSS, nicht von CSS gekoppelt mit einem Präprozessor wie Saas, Less oder SCSS. Die Verwendung von CSS-Variablen erfordert keine zusätzlichen Tools, Editoren oder Änderungen in Ihrem Workflow oder irgendetwas anderem, das Sie verwenden. Daher erfordern vorhandene CSS-Dateien ohne Variablen keine „besonderen“ Änderungen, und Sie können mischen und anpassen – verwenden Sie Variablen nur für Teile der Datei oder nur in einigen Dateien Ihres Projekts.

CSS-Präprozessoren wie Saas oder Less unterstützen ebenfalls Variablen. Außerdem haben sie viel mehr Funktionen und Optionen, die Sie verwenden können. Wie der Name schon sagt, benötigen sie jedoch einen Präprozessor – ein Tool, das in Saas geschriebenes CSS in reines CSS umwandelt. Wenn Sie nur Variablen brauchen – reines CSS hat alles, was Sie brauchen.

CSS-Variablen sind eine native Funktion, und das macht sie großartig. Mit minimalem Aufwand sind Ihre Stylesheets viel besser lesbar und konsistenter. Darüber hinaus sind alle Änderungen, die Sie später vornehmen müssen, viel einfacher durchzuführen – sicherlich schneller als Suchen und Ersetzen, wenn Sie einen Farbcode an Hunderten von Stellen ändern müssen .

Lassen Sie uns einige Variablen erstellen

Wie in jeder Programmiersprache gibt es zwei Schritte, um Variablen zu verwenden : ihnen einen Wert zu geben (sie zu definieren) und sie zu verwenden (sie an allen Stellen zu platzieren, an denen Sie diesen Wert benötigen). Wir werden dasselbe tun;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Wenn Sie eine Variable global (überall) in der CSS-Datei verwenden möchten, müssen Sie sie in der :root definieren. Der Ort in der Datei spielt keine Rolle. Es kann am Anfang oder am Ende der Datei stehen. Aber Sie müssen die Variable in :root . Der Name muss mit einem doppelten Bindestrich -- und darf keine Leerzeichen enthalten. CSS-Variablen können jeden Wert enthalten, den Sie normalerweise einer CSS-Eigenschaft zuweisen; von einfachen Werten wie Farben bis hin zu komplexen Ausdrücken für abgekürzte Eigenschaften wie Hintergrund oder Schatten.

Um eine Variable zu verwenden (um ihren Wert zu erhalten), platzieren Sie sie in der Funktion var() . Vergessen Sie nicht, dass alle Variablennamen mit -- beginnen. Das ist alles, was Sie wissen müssen, um loszulegen.

Verwendung von Fallback-Werten

Falls eine Variable nicht definiert ist, kann der Funktion var() als zweiter Parameter ein Fallback-Wert übergeben werden.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Machen Sie sich keine Sorgen, wenn der Immobilienwert komplex ist. Der Fallback-Parameter erlaubt Kommas (siehe box-shadow Beispiel). Es ermöglicht auch die Verkettung mehrerer var() Funktionen, wie für color in .custom-text gezeigt. Wenn --my-red und --my-blue nicht definiert sind, wird Rot als Farbe verwendet.

Die Kombination von var() und calc() funktioniert auch ohne Überraschungen in der Syntax. Hier ist ein Beispiel, das eine lokale Variable enthält, die nur in der Klasse verfügbar ist, in der sie definiert wurde.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Verwenden Sie calc() sparsam. Es ist keine schlechte Sache, aber wenn es überbeansprucht wird, wird es ziemlich problematisch zu debuggen und zu warten.

Abrufen und Setzen von CSS-Variablen über JavaScript

Durch die Verwendung von einfachem JavaScript können Sie neue CSS-Variablen festlegen und auf ihre Werte zugreifen. Ich verwende diese Methode nicht. Stattdessen ziehe ich es vor, die Klasse des Elements zu ändern. Allerdings spricht nichts dagegen, wenn Sie per JavaScript auf CSS-Variablen zugreifen möchten. Es ist sicherlich in einigen Situationen brauchbar. Wer bei jQuery bleibt, kann den Code in ein jQuery-Plugin umwandeln.

Um eine neue Variable zu erstellen oder den Wert einer bestehenden zu ändern, verwenden Sie:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Der Zugriff auf eine Variable ist etwas komplexer. Wenn die Variable über JS definiert wird, verwenden Sie:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Wenn es jedoch über CSS definiert ist (und das wird es normalerweise sein), verwenden Sie diesen Code:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Probleme und Dinge, auf die Sie achten sollten

Da Sie nun wissen, wie man Variablen verwendet, sollten Sie es nicht übertreiben und für jeden einzelnen Eigenschaftswert im Stylesheet eine Variable erstellen. Dies wäre zum Beispiel Overkill und Missbrauch des gesamten Konzepts;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Du hast nichts erreicht. Habe gerade --spacing-10 statt 10px . Sie werden bald zwanzig weitere Variablen für jeden Füllpixelwert zwischen 5 und 100 Pixel erstellen. Wenn Sie Konsistenz anstreben, wählen Sie ein Konzept von --small-padding, --medium-padding, --large-padding und weisen Sie entsprechende numerische Werte zu.

Obwohl dies vom CSS - Standard nicht gefordert wird , empfehle ich von ganzem Herzen , alle Variablen an einer Stelle und am Anfang der CSS - Datei zu definieren . So wissen Sie immer, wo sie sich befinden, und können Werte schnell ändern. Wenn Sie Definitionen über die gesamte Datei verteilen, wird es Ihnen schwerfallen, die Dinge nachzuverfolgen, und Sie könnten am Ende dieselbe Variable an mehreren Stellen definieren. Das Debuggen wird keine lustige Aufgabe sein.

Es gibt keinen Grund, CSS-Variablen nicht zu verwenden

Im Internet gehen die Dinge schnell voran (wie das Ersetzen von Cookies durch lokale Speicherung). Für große Projekte und große Teams ist der Wechsel zu CSS-Präprozessoren wie Saas der richtige Weg. Für kleinere Projekte oder bestehende Projekte, die gewartet werden müssen, sind CSS-Variablen in purem CSS jedoch die richtige Lösung . Sie erfordern absolut keine Änderungen, Software- oder Tool-Upgrades oder ähnliches. Sie definieren eine Variable und beginnen damit, sie zu verwenden.