Kurzanleitung für CSS-Variablen (Anwendungsfälle, Syntax und Beispiele)

Ich experimentiere schon seit einiger Zeit mit CSS-Variablen. Wenn Sie sich noch nicht an sie gewandt haben, können Sie diese kurze Anleitung verwenden, um sich schnell zurechtzufinden und an die Arbeit zu gehen.

Was ist das?

Ein einfaches Anwendungsbeispiel für Schaltflächen mit einem Bereich

Mit CSS-Variablen können Sie wiederverwendbare Werte in CSS definieren.

Sie sind vor langer Zeit erschienen. In letzter Zeit haben sie aufgrund der breiteren Browserunterstützung an Popularität gewonnen.

Wenn Sie einen Präprozessor wie SASS verwenden, sind Sie bereits mit Variablen vertraut. Jetzt können Sie dasselbe ohne Präprozessor tun.

Warum Stilvariablen verwenden?

Variablen ermöglichen es uns, das Prinzip von DRY einzuhalten (wiederholen Sie sich nicht). Dank ihnen haben wir auch die Möglichkeit, einen einzelnen Referenzpunkt für doppelte Werte zu erstellen. Wenn Sie einen Präprozessor verwenden, sind Ihnen die Vorteile dieses Ansatzes höchstwahrscheinlich bereits bekannt. Meistens wird dies verwendet, um die Grundfarbe festzulegen, die für viele Elemente verwendet wird.


Wiederholen Sie die Hintergrundfarbe für mehrere Selektoren

Im obigen Snippet könnte und sollte der Wert von #e74c3c eine Variable sein. Wenn wir aus diesem Wert eine Variable erstellen, erhalten wir einen einzelnen Punkt, auf den verwiesen werden kann. Dies verringert das Risiko von Fehlern und Stilproblemen, da weitere Wartungsarbeiten erleichtert werden.


Erstellen eines Referenzpunkts mithilfe einer Variablen

Im zweiten Snippet verwende ich einen Präprozessor, um zu zeigen, wie Sie eine Variable für den background-color können.

Warum nicht Präprozessorvariablen anstelle von nativen CSS-Variablen verwenden?

Gute Frage. In den meisten Fällen möchten Sie lieber an Präprozessorvariablen gebunden bleiben. Dies ist der Fall, wenn Sie sie bereits verwenden. Sie können jedoch beide Ansätze gleichzeitig nutzen. Dies wird relevant, wenn die Funktionen nativer CSS-Variablen vollständig genutzt werden müssen. Dazu später mehr.

Native CSS-Variablen sollten verwendet werden, wenn:

1. Sie haben keinen Präprozessor oder verwenden ihn nicht.
2. Sie möchten native CSS-Variablen nutzen.

Hauptvorteile nativer CSS-Variablen

Meiner Meinung nach haben native CSS-Variablen zwei große Vorteile.

Der erste. Sie werden zur Laufzeit aktualisiert! Sie können mithilfe von Medienabfragen, Status oder sogar JavaScript gesteuert werden. Der Browser übernimmt die vorgenommenen Änderungen. Dies eröffnet viele Möglichkeiten.

Darüber hinaus ermöglichen CSS-Variablen den Gültigkeitsbereich. Dies bedeutet, dass Sie beispielsweise den Stil oder das Verhalten eines Elements ändern können, indem Sie den Wert einer Variablen aktualisieren. Andernfalls müssen Sie neue Stile für dieses Element von Grund auf neu registrieren. Infolgedessen nimmt das CSS-Volumen am Ausgang ab.

Nicht die schönste Syntax

Schauen wir uns ein Beispiel an.



Was ist ein :root Pseudo- :root ? Alles ist logisch: Es ist ein Pseudo-Selektor einer Baumwurzel. Mit dem :root Selektor: können globale Variablen definiert werden. In diesem Fall definieren wir den rebeccapurple Wert für die Variable --primary .



Um eine Variable zu definieren, werden zwei Bindestriche als Präfix verwendet.



Um eine Variable zu verwenden, benötigen wir die var Funktion.

Und was passiert, wenn wir auf eine Variable verweisen, deren Wert nicht festgelegt ist? In diesem Fall können Sie Fallback-Werte oder Standardwerte festlegen. Die var Funktion unterstützt einen zweiten optionalen Parameter, der Fallback-Werten oder Standardwerten entspricht.



Dieses Snippet legt den Quellstil für das button Tag fest. Wenn möglich für background-color , wird der Wert --btn-color . Wenn die Variable nicht vorhanden ist oder der Wert nicht festgelegt ist, wird der Wert --primary .

Für unseren Fallback muss keine Variable verwendet werden. Sie können den Wert nehmen. Mit Variablen ist es jedoch einfacher, die Codeunterstützung zu implementieren.

Beachten Sie, dass für button.btn keine Stile deklariert button.btn . Stattdessen wird der Wert aktualisiert. Jetzt ist es angebracht, mit Kaskade und Umfang fortzufahren.

Kaskadierung und Bereiche

Bei der Arbeit mit Variablen werden die Kaskadierung sowie der Umfang der Variablen berücksichtigt. Im vorherigen Beispiel werden Variablen in der :root Pseudoklasse deklariert. Alle Variablen im :root Selektor haben einen globalen Gültigkeitsbereich.

In einem Beispiel oben war --primary für alle Selektoren verfügbar. Aufgrund des Gültigkeitsbereichs kann dieser Wert überschrieben werden. Zum Beispiel möchten wir, dass sich der --primary für die premium ändert.



In diesem Fragment ist der Wert der Variablen --primary eines premium Klassenelements dodgerblue . Das heißt, wenn keine Klasse auf die button angewendet wird, ist der Wert der Variablen rebeccapurple . Wenn Sie jedoch die premium anwenden, ändert sich die Farbe in dodgerblue .

Es ist erwähnenswert, dass Inline-CSS-Variablen wie bei Inline-Stilen die höchste Priorität haben.



In diesem Fragment wird die Hintergrundfarbe der Schaltfläche auf red , obwohl hier die premium verwendet wird. Dies geschieht, weil der Wert --primary direkt im Tag beschrieben wird.

Wertmanagement

Sie können die Werte von CSS-Variablen mithilfe anderer CSS-Regeln steuern. Die Hauptansätze sind Medienabfragen und Statusänderungen.

Beispielsweise kann sich der Wert einer Variablen ändern, wenn die Breite des Bildschirms einen bestimmten Wert überschreitet.



Durch die Änderung wird der Browser neu gezeichnet und dem Benutzer das Ergebnis angezeigt.

In diesem Fall ändert sich der Hintergrundverlauf, wenn die Breite 768px überschreitet.

Wie verwalte ich Variablen mit Zuständen? Nehmen Sie zum Beispiel die button . Die CSS-Variable wird basierend auf dem Status der button aktualisiert.



In diesem Fall können Sie den Schaltflächenstil basierend auf dem Status " :active anpassen.

Verwalten von Werten mit JavaScript

Das Verwalten von Variablen über CSS ist sehr praktisch. Aber um wirklich die Kontrolle über sie zu erlangen, müssen Sie sie mit JavaScript kontrollieren. Zum Glück ist das echt.

Mit der setProperty Methode können setProperty Elementstilvariablen festlegen und verwalten.



Wie aktualisiere ich den Variablensatz in der :root Pseudoklasse? Gute Frage. Sie müssen Dokumenteigenschaften für documentElement festlegen.



Wenn Sie CSS-Variablen auf diese Weise bearbeiten können, gibt es viele Möglichkeiten. Neugierig auf die Verfolgung der Cursorposition mit dem mousemove .

Verwenden von calc () und Verwerfen von Einheiten

Versuchen Sie, keine Einheiten in Variablen zu verwenden. Dies erleichtert die weitere Wartung.



Mit der Funktion calc() können Sie Werte mit den gewünschten Einheiten normalisieren und einstellen.



CSS-Variablen können sogar zum Speichern von Informationen über bevorzugte Einheiten verwendet werden. Aus Gründen der Übersichtlichkeit haben wir "1px" in das Fragment aufgenommen, aber Sie können es durch "1pt", "1rem" usw. ersetzen.

Das Fehlen von Einheiten ist normalerweise relevanter, wenn Werte aus JavaScript festgelegt werden. Bei der Verarbeitung reiner Werte abstrahiert unser Skript von CSS. Die Verbindung ist unterbrochen.



Wenn Einheiten in CSS enthalten sind, wird der Service auch über CSS geleitet.

Anwendungsbeispiele

Ich studiere immer noch verschiedene Beispiele für die Verwendung von CSS-Variablen. Zunächst fällt ein dynamisches Thema ein. Das Verfolgen des Cursors und das Scrollen des Bildschirms sind ebenfalls interessante Anwendungen. Ich habe Schulungsunterlagen vorbereitet, die unten aufgeführt sind.

Beispiel mit einem Hund und einem Ball

Lassen Sie uns ein Beispiel zusammenarbeiten!



Hier verfolgen wir einfach die Position des Cursors und aktualisieren die Position der beiden Emojis.



Die Hauptsache hier ist, Emojis von einem zentralen Punkt mit translate und gleichzeitig eine transition-delay auf den Hund anzuwenden.

Wie aktualisiere ich die Situation? Verwenden von Variablen für --x und --y .



Wie kann man den Hund zurückhalten? transition-delay wird angewendet. Ein komplexer Verlangsamungseffekt kann auch mit der transition-timing-function erzielt werden.



Es bleibt nur, diese Variablen für mousemove zu aktualisieren.



Das ist alles. Noch ein paar kleinere Verbesserungen, und so etwas stellt sich heraus:

Nachteile

Bisher verlief die Arbeit mit CSS-Variablen recht reibungslos. Ich bin selten auf Situationen gestoßen, in denen etwas nicht geklappt hat. Hier sind einige Möglichkeiten, die ich für CSS-Variablen sehen möchte.

1. Animation von Variablen. In diesem Artikel habe ich überhaupt nicht über Animation gesprochen. Sie können Variablen dafür verwenden. Die Animation der Werte selbst ist jedoch nicht möglich.
2. CSS-Variablen können in Selektoren nicht verwendet werden. Dies ist logisch, aber es wäre großartig, wenn ein solches Interpolationsniveau verfügbar wäre. Die Verwendung von Variablen im n-ten untergeordneten Selektor wäre cool.

Fazit

Ich arbeite gerne mit CSS-Variablen. Je mehr ich sie mache, desto mehr Anwendungsbeispiele fallen mir ein.

Dank dieses Artikels können Sie selbst mit dem Erlernen von CSS-Variablen beginnen.

Wenn Sie einen detaillierteren Überblick über CSS-Variablen erhalten möchten, sehen Sie sich dieses Video an .

LOOKING.HOUSE - Das Projekt sammelte mehr als 150 Spiegel in 40 Ländern. Sie können Host-, Ping-, Traceroute- und mtr-Befehle schnell ausführen.