Was sind CSS-Variablen und wie werden sie verwendet?

Veröffentlicht: 2022-02-16

Beim Schreiben des CSS-Codes für Ihre Website können Sie benutzerdefinierte CSS-Eigenschaften (Variablen) verwenden, um den Entwicklungsprozess zu beschleunigen. Über Variablen können Eigenschaften (Größe, Farbe) definiert werden, die dann auf mehrere Elemente angewendet werden können.

Auf diese Weise ist es möglich, mehr Kontrolle über den Code und das Design zu haben. Das Ändern des Werts einer Variablen an einer Stelle überschreibt den Wert dieser Eigenschaft überall dort, wo sie aufgerufen wird.

Dieser Beitrag erklärt die Verwendung von CSS-Variablen und einige praktische Anwendungen.

Lasst uns beginnen!

Deklarieren einer Variablen

Variablen können globalen oder lokalen Gültigkeitsbereich haben. Um eine Variable global zu definieren, verwenden Sie den :root-Selektor.

 :root { --base-font-size: 1.1rem; }
IM POPUP ÖFFNEN
 :root { --base-font-size: 1.1rem; }

Der :root- Selektor entspricht dem Stammverzeichnis des Dokuments, in unserem speziellen Fall also <html> .

Um eine benutzerdefinierte CSS-Eigenschaft (Variable) zu deklarieren, beginnen Sie mit zwei Bindestrichen (--). Bei Variablen wird zwischen Groß- und Kleinschreibung unterschieden, zum Beispiel:

--base-font-size und --Base-Font-Size sind zwei verschiedene Variablen.

Um eine Variable lokal zu definieren, verwenden Sie den Selektor des Elements, in dem Sie die Variable verwenden möchten.

 #first-container { --background: #ccc; }
IM POPUP ÖFFNEN
 #first-container { --background: #ccc; }

Nachdem Sie die Variable definiert haben, müssen Sie sie aufrufen.

Die var()-Funktion

Die Funktion var() wird verwendet, um den Wert der definierten CSS-Variablen einzufügen. Die Funktion ersetzt sich selbst durch den Wert der Variablen. Schauen wir uns ein Beispiel an:

Der HTML-Code

  • Kopieren Sie diesen Code und fügen Sie ihn in Ihren Code-Editor ein.
  • Speichern Sie die Datei als index.html .
 <!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"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
IM POPUP ÖFFNEN
 <!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"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>

Was sind CSS-Variablen und wie werden sie verwendet?

Der CSS-Code

  • Erstellen Sie eine Datei namens style.css (im selben Verzeichnis wie index.html ).
  • Fügen Sie den folgenden Code ein und speichern Sie die Datei.
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }
IM POPUP ÖFFNEN
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }

Was sind CSS-Variablen und wie werden sie verwendet?

Hier gibt es einiges zu beachten:

  1. Das Erstellen einer Farbpalette ist ein unkomplizierter Vorgang.
  2. Es ist möglich, eine Variable innerhalb der Definition einer anderen Variablen zu verwenden, wie die Farbe in der Definition der Randvariablen.
  3. Variablen werden vererbt, die Farbeigenschaft des .container-*-Elements wirkt sich auf seine direkten Kinder aus. In diesem Fall das Element <p>.

Um eine Variable zu überschreiben, deklarieren Sie sie in ihrem Container, wodurch sie spezifischer wird.

  • Bearbeiten Sie den CSS-Code:
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
IM POPUP ÖFFNEN
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }

Was sind CSS-Variablen und wie werden sie verwendet?

Variablen und Medienabfragen

Variablen können auch in den CSS-Medienabfragen vererbt und überschrieben werden.

  • Fügen Sie diesen Code zu den Variablen hinzu:
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
IM POPUP ÖFFNEN
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }

Wir haben eine Basisbreite für das Wrapper-Element definiert. Wir können diese Variablen jetzt auf die Breiteneigenschaft .wrapper anwenden.

  • Fügen Sie diesen Code am Ende der CSS-Datei hinzu:
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }
IM POPUP ÖFFNEN
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }

Was sind CSS-Variablen und wie werden sie verwendet?

Um eine Medienabfrage für Geräte mit einer Bildschirmbreite von weniger als 1100 Pixel zu definieren, schreiben wir die folgende Medienabfrage.

  • Bearbeiten Sie den CSS-Code:
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
IM POPUP ÖFFNEN
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }

Was sind CSS-Variablen und wie werden sie verwendet?

Was sind CSS-Variablen und wie werden sie verwendet?

Die neue Variablendefinition in der Medienabfrage überschreibt ihren Wert. Beachten Sie auch, dass die Variable im DOM verfügbar ist, was bedeutet, dass sie mit JS abgerufen und bearbeitet werden kann. Das ist mit Variablen innerhalb von CSS-Präprozessoren nicht möglich.

Zusammenfassung

Variablen sind nützlich, um kleine und große CSS-Mengen zu organisieren und zu verwalten. Sie reduzieren Wiederholungen und beugen damit Fehlern vor. CSS-Variablen sind dynamisch, dh sie können zur Laufzeit geändert werden. Es ist einfach, eine Website oder Anwendung dynamisch mit CSS-Variablen zu gestalten. Sie bieten die Möglichkeit, einer CSS-Eigenschaft Werte mit einem benutzerdefinierten Namen zuzuweisen. Variablen folgen den Standard-Kaskadierungsregeln, sodass es möglich ist, dieselbe Eigenschaft auf unterschiedlichen Spezifitätsebenen zu definieren.

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Danke fürs Lesen!