Anfängerleitfaden zu CSS-Variablen (auch bekannt als benutzerdefinierte CSS-Eigenschaften)

Inhaltsverzeichnis:

• CSS-Variablen in Präprozessoren #
• Variablen (benutzerdefinierte Eigenschaften) in nativem CSS #
• Warum „benutzerdefinierte Eigenschaften“? #
• Wo werden CSS-Variablen definiert? #
• Technische Hinweise zu CSS-Variablen #
• Die Funktion var() verstehen #
• Verwenden von CSS-Variablen mit calc() #
• Tricks mit CSS-Variablen #

CSS-Variablen in Präprozessoren

CSS-Präprozessoren verwenden seit weit über 10 Jahren CSS-Variablen. Ich werde hier nicht sehr detailliert auf diese Optionen eingehen, aber ich denke, es ist hilfreich zu wissen, wie jede der gängigen Präprozessorbibliotheken Variablen verwendet.

In Sass (oder SCSS) deklarieren Sie Variablen wie folgt:

Beachten Sie das Dollarzeichen ($). Die erste Zeile ist die Deklaration der Variablen und ihres Wertes. Die beiden folgenden Blöcke sind Beispiele für die Variablen, die später im Stylesheet verwendet werden.

Variablen in Less.js verwenden das @ -Symbol:

Und in Stylus sehen Variablen so aus:

Sie können die einzelnen Dokumentationsabschnitte für jeden der oben gezeigten Präprozessoren konsultieren, wenn Sie sich weiter mit Variablen befassen möchten, die diese Technologien von Drittanbietern verwenden.

Variablen (benutzerdefinierte Eigenschaften) in nativem CSS

Dies bringt uns zu CSS-Variablen oder benutzerdefinierten Eigenschaften, wie sie in der CSS-Spezifikation definiert sind. Um eine Variable in einfachem CSS zu deklarieren, setzen Sie zwei Bindestriche vor den benutzerdefinierten Namen, den Sie für die Variable oder Eigenschaft wählen, und verwenden Sie dann die Funktion var() , um diesen Wert an der gewünschten Stelle zu platzieren:

In diesem Beispiel habe ich zwei CSS-Variablen definiert: --main und --accent . Ich habe dann jede CSS-Variable für zwei verschiedene Elemente verwendet, um die Flexibilität zu demonstrieren, die sie eröffnen.

Wie bei Variablen in jeder Programmiersprache ermöglicht Ihnen dies, eine Variable an einer einzigen Stelle zu deklarieren. Wenn Sie diesen Wert später überall in Ihrem Stylesheet ändern möchten, müssen Sie einfach die ursprüngliche Deklaration ändern, und sie gilt für alle Stellen, an denen Sie die Variable verwenden.

Warum „benutzerdefinierte Eigenschaften“?

Im alltäglichen Gespräch bezeichnen Entwickler diese Funktion oft als „CSS-Variablen“, in Anlehnung an die Art und Weise, wie Präprozessoren und Programmiersprachen auf dieselbe Funktion verweisen. Rein technisch betrachtet handelt es sich dabei aber nicht wirklich um „Variablen“, sondern um Custom Properties .

Sie haben die gleiche Syntax wie jede vordefinierte Eigenschaft in CSS, mit Ausnahme der beiden Bindestriche, die vor dem Eigenschaftsnamen stehen. Die zwei Bindestriche ermöglichen es CSS-Autoren, jeden gültigen gestrichelten Bezeichner zu verwenden, ohne Konflikte mit regulären CSS-Eigenschaften befürchten zu müssen.

Die Spezifikation erklärt, dass allein zwei Bindestriche ungültig sind (anscheinend für die zukünftige Verwendung reserviert) und dass CSS keinem gültigen Bindestrich-Identifizierer über seine Verwendung als vom Autor definierte benutzerdefinierte Eigenschaft hinaus eine Bedeutung geben wird.

Im Gegensatz zu normalen CSS-Eigenschaften wird bei benutzerdefinierten Eigenschaften zwischen Groß- und Kleinschreibung unterschieden. Das bedeutet, dass --main-color nicht dasselbe ist wie --Main-Color . Gültige Zeichen für den Namen der benutzerdefinierten Eigenschaft sind Buchstaben, Zahlen, Unterstriche und Bindestriche.

Wo werden CSS-Variablen definiert?

Wie Sie in dem oben bereitgestellten Beispiel sehen können, sehen Sie häufig benutzerdefinierte CSS-Eigenschaften, die direkt im Stammelement eines HTML-Dokuments oder eines Shadow-DOM definiert sind. Der Pseudo-Klassenselektor :root erledigt dies.

Aber CSS-Variablen sind nicht darauf beschränkt, nur im Stammelement definiert zu werden, und es ist oft vorteilhaft, sie an anderer Stelle zu definieren. Der :root Selektor wird häufig gewählt, da dieser immer auf das oberste Element im DOM-Baum abzielt (egal ob es sich um das vollständige Dokument oder um das Schatten-DOM handelt).

In den meisten Fällen erhalten Sie das gleiche Ergebnis, wenn Sie benutzerdefinierte Eigenschaften für das html -Element (das das Stammelement in HTML-Dokumenten ist) oder sogar für das body -Element definieren. Die Verwendung von :root ermöglicht einen zukunftssichereren Code (z. B. wenn die Spezifikation eines Tages ein neues Element als Root hinzufügt, bleibt das CSS gleich) und ich nehme an, dass ein Stylesheet auch auf einen anderen Dokumenttyp angewendet werden kann hat ein anderes Wurzelelement.

Beispielsweise würde der folgende Code Ihre benutzerdefinierten Eigenschaften auf die Verwendung nur im .sidebar Element beschränken:

Zu Demonstrationszwecken sehen Sie oft Variablen, die auf :root definiert sind, aber Sie können sie überall dort verwenden, wo es praktisch ist. Tatsächlich empfehlen viele Entwickler, sie während der anfänglichen Entwicklung für kleinere Module weiter unten im DOM-Baum zu setzen und sich dann in Richtung :root , während Sie Werte erstellen, die einen größeren Umfang haben.

Technische Hinweise zu CSS-Variablen

CSS-Variablen können nicht nur auf jedes Element angewendet werden, sondern sind auch ziemlich flexibel und einfach zu handhaben.

Hier sind einige erwähnenswerte Dinge:

• Sie werden mit regulären CSS-Vererbungs- und Kaskadenregeln aufgelöst
• Sie können sie in Medienabfragen und anderen bedingten Regeln verwenden
• Sie können sie im style -Attribut eines Elements definieren
• Sie können mit Funktionen des CSS-Objektmodells gelesen oder festgelegt werden.

Es ist auch bemerkenswert, dass Sie CSS-Variablen im Wesentlichen verschachteln können. Beachten Sie das folgende Beispiel:

Beachten Sie, dass ich eine Variable --main-color definiert habe und dann denselben Variablennamen als Wert für die folgende CSS-Variable verwende.

Sie können das Schlüsselwort !important auch in einem CSS-Variablenwert verwenden, aber dies wendet die „Wichtigkeit“ nur auf die Variable selbst in Bezug auf andere Variablendefinitionen an und nicht auf den Wert, der für ein oder mehrere Elemente im Dokument verwendet wird. Wenn das verwirrend ist, hier ist ein Beispiel:

Im obigen Beispiel wäre die Hintergrundfarbe „hellblau“, obwohl später in den Variablendefinitionen Orange auftaucht. Aber der Hintergrundwert selbst auf dem body -Element hätte keine Bedeutung.

CSS-Variablen können auch CSS-weite Schlüsselwortwerte wie initial , inherit und unset enthalten, aber die Eigenschaft all wirkt sich nicht auf CSS-Variablen aus (dh sie werden nicht zurückgesetzt).

Die Funktion var() verstehen

Sie haben die Funktion var() bereits in einigen typischen Beispielen in diesem CSS-Variablen-Tutorial gesehen. Aber var() hat noch mehr zu bieten als das, was ich bisher behandelt habe.

Erstens ist die Funktion var() nur in einem Wert gültig; Ein Eigenschaftsname oder Selektor kann keine CSS-Variable verwenden. Außerdem kann ein Medienabfragewert keine CSS-Variable verwenden (z. B. @media (max-width: var(--my-var)) ist ungültig).

Die Funktion var() akzeptiert zwei Argumente:

• Der Name der einzuschließenden benutzerdefinierten Eigenschaft
• Ein Fallback-Wert für den Fall, dass die benutzerdefinierte Eigenschaft ungültig ist

Hier ist ein Beispiel, wo das zweite Argument wirksam wird:

Beachten Sie, dass ich im obigen Code den anfänglichen Variablennamen mit dem britischen oder kanadischen Wort „Farbe“ geschrieben habe, aber als ich die Variable verwendete, habe ich die amerikanische Schreibweise „Farbe“ übernommen. Dadurch wird die Variable technisch ungültig und es tritt stattdessen der einfache graue ( #ccc ) Hintergrund in Kraft.

Beachten Sie auch, dass ein Fallback-Wert seine eigenen Kommas enthalten kann. Wenn Ihr Fallback beispielsweise ein Schriftartstapel ist, wäre dies eine gültige Möglichkeit, ihn zu definieren:

Beachten Sie erneut, dass meine Variable einen Fehler aufweist und einen unbekannten --main-type anstelle von --main-font . Dies löst den Fallback-Wert aus, bei dem es sich um einen alternativen Schriftartstapel handelt. Somit ist alles nach dem ersten Komma (auch einschließlich aller anderen Kommas) der Fallback-Wert.

Verwenden von CSS-Variablen für Teiltöne

Beim Definieren einer CSS-Variablen muss der Wert, den sie enthält, kein gültiger CSS-Wert an sich sein; es kann sich um einen Teilwert handeln, der als Teil eines vollständigen Werts verwendet werden kann.

Sie können beispielsweise einen Schriftstapel aufteilen:

In diesem Fall funktioniert jeder der Variablenwerte für sich, aber es demonstriert den Punkt. Lassen Sie uns ein ausgeklügelteres Beispiel mit der rgba() :

Sie können sehen, wie nützlich dies sein könnte, da Sie Werte im Wesentlichen dynamisch „erstellen“ können.

Verwenden von CSS-Variablen mit calc()

Eine der nützlichen Möglichkeiten, CSS-Variablen in Ihre Projekte einzubinden, ist die Verbindung mit der Funktion calc calc() . Wie Sie vielleicht wissen, können Sie mit calc() Berechnungen innerhalb eines Werts durchführen. Sie können also Folgendes tun:

Benutzerdefinierte CSS-Eigenschaften ermöglichen es Ihnen, calc() auf die nächste Ebene zu bringen, beispielsweise mit vordefinierten Größen. Ahmad Shadeed hat etwas Ähnliches beschrieben und hier ist ein Beispiel:

Wenn dies vorhanden ist, kann ich die .module und .module-* in Medienabfragen verwenden, sodass ich diese Stile bedingt für bestimmte Darstellungsgrößen oder andere Medienfunktionen anzeigen kann. Die kleinen/mittleren/großen Module hätten die gleichen Klassen wie das primäre Modul, aber nur die Modulgröße wird nach Bedarf überschrieben. Im obigen Beispiel fungiert der anfängliche 240 -Wert für die Größe als eine Art Standardwert, aber ich könnte auch 240px als zweites Argument in var() übergeben, um als Fallback zu arbeiten.

Tricks mit CSS-Variablen

Mehrere Entwickler haben im Laufe der Jahre Tipps und Tricks zur Verwendung von CSS-Variablen geteilt. Ich werde diese hier nicht im Detail erläutern, da dies hauptsächlich ein Anfänger-Tutorial ist, aber hier ist ein kurzer Überblick über einige:

• Wie ich bereits erwähnt habe, können Sie CSS-Variablen in Inline-Stilen verwenden, wie im Fall von Seitenverhältnis-Boxen.
• Ein Leerzeichen ist ein gültiger Wert für eine CSS-Variable, mit der Sie einen Ein-/Aus-Trick ausführen können (z. B. für so etwas wie den Dunkelmodus), über den Sie in Leas Beitrag lesen können.
• Sie können keine Hover-Stile in Inline-Stile schreiben, aber Sie können dies mit CSS-Variablen umgehen.
• CSS-Variablen helfen dabei, mehrfarbige SVGs einfacher zu erstellen, wie hier beschrieben.
• Mit CSS-Variablen können Sie praktische und wartbare Designsysteme und Designs erstellen, die in diesem Beitrag ausführlich erläutert werden
• Sie können CSS-Variablen verwenden, um mithilfe von Grid-Layout-Funktionen effizientere und wartbarere Grids zu erstellen, wie von Michelle Barker beschrieben.

Fazit

CSS-Variablen oder benutzerdefinierte CSS-Eigenschaften sind heute einsatzbereit, da weit über 90 % der weltweit verwendeten Browser diese praktische Funktion unterstützen. Ich hoffe, diese Erörterung der Grundlagen und der Syntax wird Sie ermutigen, CSS-Variablen in Ihren neuesten Projekten in Betracht zu ziehen, falls Sie dies noch nicht getan haben.

Wenn Ihre Verwendung von CSS-Variablen auf einige globale Themenfarben beschränkt war, wird Sie dieses Tutorial vielleicht dazu inspirieren, sie häufiger zu verwenden und möglicherweise eigene Tricks zu finden.

Nachdem Sie nun mit CSS-Variablen fertig sind, sehen Sie sich einige unserer anderen Anleitungen an:

• CSS-Grid-Layout
• Einführung in Parcel.js
• CSS-Flexbox-Tutorial
• Webpaket für Anfänger
• Micro-Interactions-Tutorial für Anfänger-Entwickler

Falls Sie Fragen zu diesem CSS-Variablen-Tutorial haben, können Sie diese gerne in den Kommentaren unten einreichen.

Layout und Präsentation von Chris Fitzgerald und Karol K.