Wie Sie Variablen in CSS verwenden und Ihr Styling rationalisieren

How-to-Use-Variables-in-CSS-and-Streamline-Your-Styling

Die meisten Websites verwenden CSS, um ihr Erscheinungsbild zu verbessern und verschiedene Webseiten-Komponenten zu gestalten. CSS, oder Cascading Style Sheet, ist technisch gesehen keine Programmiersprache. CSS kann jedoch zusammen mit Programmiersprachen wie JavaScript verwendet werden, um ansprechende und interaktive Webseiten zu erstellen.

Wenn Sie Programmiersprachen wie JavaScript verwendet haben, wissen Sie, dass Sie eine Variable deklarieren, ihr einen Wert zuweisen und sie in verschiedenen Teilen Ihres Codes wiederverwenden können. Die gute Nachricht ist, dass Sie das gleiche Konzept auch in CSS anwenden können.

In diesem Artikel definieren wir CSS-Variablen, beschreiben ihre Vorteile und zeigen Ihnen, wie Sie eine Variable in CSS deklarieren und verwenden können.

Was sind Variablen in CSS?

CSS-Variablen sind benutzerdefinierte Eigenschaften, die es Webentwicklern ermöglichen, Werte zu speichern, die sie im Stylesheet wiederverwenden können. So können Sie beispielsweise den Schriftstil, die Hintergrundfarbe und die Schriftgröße angeben, die Sie für Elemente wie Überschriften, Absätze und Divs in Ihrer Codebasis wiederverwenden können.

Warum CSS-Variablen verwenden? Dies sind einige der Gründe;

Erleichtert die Aktualisierung des Codes: Sobald Sie eine Variable deklarieren, können Sie Ihr gesamtes Stylesheet wiederverwenden, ohne jedes Element manuell aktualisieren zu müssen.
Reduziert Wiederholungen: Wenn Ihre Codebasis wächst, werden Sie feststellen, dass Sie ähnliche Klassen und Elemente haben. Anstatt CSS-Code für jedes Element zu schreiben, können Sie einfach CSS-Variablen verwenden.
Macht Ihren Code wartungsfreundlicher: Die Pflege des Codes ist wichtig, wenn Sie wollen, dass Ihr Unternehmen Bestand hat.
Verbessert die Lesbarkeit: Die moderne Welt fördert die Zusammenarbeit. Die Verwendung von Variablen in CSS führt zu einer kompakten Codebasis, die lesbar ist.
Einfache Aufrechterhaltung der Konsistenz: CSS-Variablen können Ihnen dabei helfen, einen konsistenten Stil beizubehalten, wenn Ihr Quellcode wächst oder die Größe der App zunimmt. So können Sie beispielsweise die Ränder, die Auffüllung, den Schriftstil und die Farben für Ihre Schaltflächen auf der gesamten Website festlegen.

Wie man Variablen in CSS deklariert

Da Sie nun wissen, was Variablen in CSS sind und warum Sie sie verwenden sollten, können wir Ihnen nun zeigen, wie Sie sie deklarieren.

Um eine CSS-Variable zu deklarieren, beginnen Sie mit dem Namen des Elements und schreiben dann zwei Bindestriche (–), den gewünschten Namen und den Wert. Die grundlegende Syntax lautet;

element {

--variable-name: value;

}

Wenn Sie beispielsweise Ihr gesamtes Dokument mit einem Padding versehen möchten, können Sie es wie folgt deklarieren;

body { 

--padding: 1rem;

}

Umfang von Variablen in CSS

CSS-Variablen können lokal (Zugriff innerhalb eines bestimmten Elements) oder global (Zugriff im gesamten Stylesheet) definiert werden.

Lokale Variablen

Lokale Variablen werden zu bestimmten Selektoren hinzugefügt. Sie können sie zum Beispiel einer Schaltfläche hinzufügen. Dies ist ein Beispiel;

.button {

 --button-bg-color: #33ff4e;

 }

Die Variable für die Hintergrundfarbe ist für den Schaltflächenselektor und seine Kinder verfügbar.

Globale Variablen

Einmal deklariert, können Sie globale Variablen mit jedem Element in Ihrem Code verwenden. Wir verwenden die Pseudoklasse :root, um globale Variablen zu deklarieren. So deklarieren wir sie;

:root {

 --primary-color: grey;

 --secondary-color: orange;

 --font-weight: 700:

 }

Im obigen Code können Sie jede der deklarierten Variablen mit verschiedenen Elementen verwenden, z.B. mit Überschriften, Absätzen, divs oder sogar dem gesamten Textkörper.

Wie Sie Variablen in CSS verwenden

Wir erstellen ein Projekt zu Demonstrationszwecken und fügen die Dateien index.html und styles.css hinzu.

In der Datei index.html können wir ein einfaches div mit zwei Überschriften ( h1 und h2) und einem Absatz (p) einfügen.

<div>

 <h1>Hallo Front-end Dev!!!!</h1>

 <h2>So verwenden Sie Variablen in CSS.</h2>

 <p>Scrollen Sie weiter</p>

 </div&gt

In der Datei style.css können wir das Folgende einfügen;

:root {

 --primary-color: grey;

 --secondary-color: orange;

 --font-weight: 700:

 --font-size: 16px;

 --font-style: italic;

 }

 body {

 background-color: var(--primary-color);

 font-size: var(--Schriftgröße);

 }

 h1 {

 color: var(--secondary-color);

 font-style: var(--font-style)

 }

 h2 {

 font-weight: var(--font-weight)

 }

 p {

 font-size: calc(var(--font-size) * 1.2);

 }

Wenn die Webseite gerendert wird, sieht sie folgendermaßen aus;

Aus dem obigen Code geht hervor, dass wir globale Variablen im Element :root deklariert haben. Wir müssen das Schlüsselwort var verwenden, um die globale Variable in einem unserer Elemente zu verwenden. Um zum Beispiel die Hintergrundfarbe, die wir als globale Variable deklariert haben, anzuwenden, stellen wir unseren Code wie folgt dar;

hintergrundfarbe: var(--primär-farbe);

Schauen Sie sich alle anderen Elemente an, und Sie werden einen Trend bei der Anwendung des Schlüsselworts var feststellen.

CSS-Variablen mit JavaScript verwenden

Wir werden lokale und globale Variablen verwenden, um die Verwendung von CSS-Variablen mit JavaScript zu veranschaulichen.

Wir können ein alert-Element zu unserem bestehenden Code hinzufügen;

<div class="alert">Klick mich!</div>

Unser neues index.html-Dokument sieht dann wie folgt aus;

<div>

 <h1>Hallo Front-end Dev!!!!</h1>

 <h2>So verwenden Sie Variablen in CSS.</h2>

 <p>Scrollen Sie weiter</p>

 </div>

 <div class="alert">Klick mich!</div&gt

Wir können unsere Variable gestalten. Fügen Sie den folgenden Code zu Ihrem bestehenden CSS-Code hinzu;

.alert {

 --bg-color: red; /* Definieren Sie eine lokale Variable */

 background-color: var(--bg-color); /* Verwenden Sie die lokale Variable für die Hintergrundfarbe */

 padding: 10px 20px;

 border-radius: 4px;

 font-weight: var(--font-weight); /*Verwenden Sie die globale Variable für die Schriftstärke*/

 width: 50px;

 }

Wir haben Folgendes getan;

Definieren Sie eine lokale Variable innerhalb des Elements alert;

--bg-Farbe: rot

Verwenden Sie das Schlüsselwort var, um auf diese lokale Variable zuzugreifen;

background-color: var(--bg-color);

Verwenden Sie die globale Variable, die wir zuvor als Schriftgrad deklariert haben;

font-weight: var(--font-weight);

JavaScript-Code hinzufügen

Wir können unser Alert-Element responsiv machen; wenn Sie darauf klicken, erscheint in Ihrem Browser ein Popup-Fenster mit der Meldung “Wir haben CSS-Variablen mit JavaScript!!!! verwendet“.

Wir können JavaScript-Code direkt in den HTML-Code einfügen, indem wir ihn mit <script/>-Tags umschließen. Der JavaScript-Code sollte nach dem HTML-Code, aber vor dem Schließen des </body>-Tags eingefügt werden.

Fügen Sie diesen Code ein;

<script>

 const alertDiv = document.querySelector('.alert');

 alertDiv.addEventListener('click', function() {

 window.alert("Wir haben CSS-Variablen mit JavaScript verwendet!!!!");

 });

 </script&gt

Ihr HTML-Code sollte nun in etwa so aussehen;

Unser JavaScript tut Folgendes;

Wir verwenden document.querySelector(), um das alert-Element zu finden.
Wir weisen dem alert-Element eine Variable alertDiv zu.
Für das alertDiv verwenden wir die Methode addEventListener(), um ein ‘click’-Ereignis hinzuzufügen.
Wir verwenden window.alert(), um eine Meldung anzuzeigen, wenn das Klickereignis eintritt.

Wenn die Seite gerendert wird, erhalten Sie folgendes Bild;

Wenn Sie auf die Meldung klicken, erhalten Sie folgendes;

Fallback-Werte in CSS-Variablen

Was passiert, wenn Sie auf eine Variable verweisen, die nicht in Ihrem Stylesheet definiert ist? Der von Ihnen beabsichtigte CSS-Effekt wird nicht angewendet. Fallback-Werte bieten einen Wert eines Effekts, der anstelle der nicht referenzierten Variable angezeigt wird.

Fallback-Werte sind in den folgenden Fällen nützlich;

Wenn bestimmte Browser CSS-Variablen nicht verstehen, kann die Select-Eigenschaft auf etwas zurückgreifen.
Wenn Sie den Verdacht haben, dass eine Seite aufgrund einer CSS-Variable nicht wie erwartet funktioniert, können Sie einen Fallback-Wert verwenden, um zu testen, ob dies der Fall ist.

Sie können mehr als eine Rückfalleigenschaft haben, die durch Kommas getrennt sind. Nehmen Sie zum Beispiel diesen Code;

:root {

 --primary-color: #007bff;

 }

 .btn {

 background-color: var(--primary-color, red, yellow);

 padding: 10px;

 border: none;

 border-radius: 5px;

 font-size: 16px;

 cursor: pointer;

 }

Wenn Sie das Wort primary-color bei der Verwendung der globalen Variable falsch schreiben, d.h. wenn sie nicht deklariert ist, wird der Fallback-Wert Rot gewählt.

Wir können es mit diesem Code besser demonstrieren;

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <style>

:root {

 --primary-color: #007bff;

 }

 .btn {

 background-color: var(--primary-color, red);

 padding: 10px;

 border: none;

 border-radius: 5px;

 font-size: 16px;

 cursor: pointer;

 }

 </style>

</head>

<body>

 <button class="btn">Klick mich!</button>

</body>

</html&gt

Wenn Sie es im Browser rendern, erhalten Sie dies;

Wir können jedoch denselben Code erhalten und nur ein Zeichen im Selektor der Schaltfläche wie folgt ändern;

.btn {

 background-color: var(--primary-colr, red); /*Ich habe primary-color fälschlicherweise als primary-colr geschrieben */

 padding: 10px;

 border: none;

 border-radius: 5px;

 font-size: 16px;

 cursor: pointer;

 }

Der Browser wird dies nun darstellen;

Verwendung von Variablen mit dynamischen Werten und berechneten Werten in CSS

Dynamische Werte werden automatisch auf der Grundlage bestimmter Ereignisse oder Bedingungen, wie z.B. Benutzereingaben, aktualisiert.

Studieren Sie diesen Code;

<!DOCTYPE html>

<html>

 <head>

 <meta charset="UTF-8">

 <title>CSS-Variablen mit JavaScript</title>

 <style>

:root {

 --color: #333; 

 }

       #color-input {

 margin-left: 1em;

 }

       #color-input {

 --color: var(--color-input);

 }

 </style>

 </head>

 <body>

 <label for="color-input">Wählen Sie eine Farbe:</label>

<input type="color" id="color-input">

 </body>

</html&gt

Der obige Code tut Folgendes;

Wir deklarieren eine Variable --color mit einem Standardwert von #333 unter Verwendung des :root-Selektors.
Wir verwenden #color-input, um das Eingabeelement auszuwählen.
Der Wert von --color wird auf var(--color-input) gesetzt, d.h. die Farbe wird immer dann aktualisiert, wenn der Benutzer eine neue Farbe über den Farbwähler auswählt.

Berechnete Werte führen Berechnungen auf der Grundlage anderer Eigenschaften oder Variablen durch. Wir können dies anhand dieses Codes veranschaulichen;

:root {

 --base-font-size: 14px;

 --header-font-size: calc(var(--base-font-size) * 3);

}

h2 {

 font-size: var(--header-font-size);

}

Anhand dieses Codeblocks können wir Folgendes feststellen;

Wir haben die Variable --base-font-size, die die Basisschriftgröße definiert.
Wir haben --header-font-size, das den 3-fachen Wert von –base-font-size hat.
Wir haben einen h1-Selektor, der var mit --header-font-size verwendet.
Alle h1 auf der Webseite haben also die dreifache Größe von --base-font-size.

Zusammenfassung

Sie wissen jetzt, wie Sie CSS-Variablen verwenden können, um den Entwicklungsprozess zu beschleunigen und Code zu schreiben, der einfach zu pflegen ist. Sie können benutzerdefinierte Variablen mit HTML und Bibliotheken wie React verwenden. Sehen Sie sich verschiedene Ansätze an, mit denen Sie React mit CSS stylen können.

Sie können sich den Quellcode hier ansehen.

Titus Kamunya

Autor