CSS-Variablen, auch als benutzerdefinierte Eigenschaften bekannt, helfen Ihnen, Wiederholungen in Ihren Stylesheets zu minimieren. Dies wiederum hilft Ihnen, Zeit und Mühe zu sparen, wenn Sie Änderungen an Ihrem Design vornehmen. Sie können sich auch darauf verlassen, dass Sie keine Werte verpassen, die Sie aktualisieren müssen.
Durch den Zugriff auf das DOM können Sie Variablen erstellen, speichern und in Ihrem Stylesheet wiederverwenden.
So definieren und verwenden Sie CSS-Variablen
Um Ihre Stylesheets übersichtlicher, wartbarer und wiederverwendbar zu machen, können Sie CSS-Variablen in jeder Eigenschaft verwenden, die einen Wert akzeptiert.
Nehmen Sie das folgende Beispiel einer HTML-Datei und einer CSS-Datei, die keine CSS-Variablen verwendet.
HTML:
html>
<htmllang="de">
<Kopf>
<Titel>CSS-Variablen - Schaltflächenvariationen
Titel>
<Verknüpfungrel="Stilvorlage"href="Variablen.css" />
Kopf>
<Körper>
<div>
<h1>CSS-Variablenh1>
<div>
CSS:
.btn {
Polsterung: 1Rest 1.5 Rest;
Hintergrund: transparent;
Schriftstärke: 700;
Farbe Rot;
}
So sollte Ihre Seite aussehen:
Der .btn Die im obigen Stylesheet verwendete Klasse ist nicht dynamisch und veranlasst Sie, eine separate Klasse zu erstellen, um einzelne Schaltflächen anzupassen. Um schöne Websites zu erstellen, müssen Sie mit Ihrem Front-End-Design dynamisch sein. Durch das Implementieren von Schaltflächen auf diese Weise wird diese Aufgabe einfach mühsam.
Wie bei den meisten Programmiersprachen müssen Sie CSS-Variablen initialisieren und ersetzen.
Um eine CSS-Variable zu initialisieren, stellen Sie dem Variablennamen doppelte Bindestriche voran:
:Wurzel{
/*CSS-Variable*/
--Variablenname: Wert;
}
Sie können eine Variable überall initialisieren, aber beachten Sie, dass Sie diese Variable nur innerhalb des initialisierten Selektors verwenden können. Aus diesem Grund werden CSS-Variablen herkömmlicherweise innerhalb des Stammselektors initialisiert. Dies zielt auf das Element der höchsten Ebene des DOM ab und ermöglicht den globalen Zugriff auf die Variablen durch das gesamte HTML-Dokument.
Um die Variable in Ihrem CSS-Stil zu ersetzen, verwenden Sie die var() Eigentum:
:Wurzel {
/*CSS-Variable*/
--primär: #900c3f;
--sekundär: #ff5733;
}.btn {
Polsterung: 1Rest 1.5 Rest;
Hintergrund: transparent;
Schriftstärke: 700;
Farbe: Var(--primär);
Hintergrundfarbe: Var(--sekundär);
}
.subprimär {
Farbe: Var(--sekundär);
Hintergrundfarbe: Var(--primär);
}
Der Stammselektor enthält zwei Variablen: --primär Und - sekundär. Beide Variablen werden dann in die eingesetzt .btn Klasse als Farbe bzw. Hintergrundfarbe.
Mithilfe der Variablen können Sie einzelne Elemente viel einfacher stylen. Durch die Wiederverwendung von Variablen können Sie einen Wert schnell einmal ändern, um ihn in jeder Instanz zu aktualisieren.
Der var() Eigenschaft kann auch ein zweites Argument annehmen. Dieses Argument fungiert als Fallback-Wert für das erste Argument in einer Situation, in der das erste nicht definiert oder ungültig ist.
Zum Beispiel:
:Wurzel {
--primär: #900c3f;
--sekundär: #ff5733;
}
.btn {
Polsterung: 1Rest 1.5 Rest;
Hintergrund: transparent;
Schriftstärke: 700;
Farbe: Var(--primär, blau);
}
Ersetzen Sie in diesem Beispiel die --primär variabel hinein Farbe Stil. Wenn dieser Wert aus irgendeinem Grund fehlschlägt, verwendet das Stylesheet den zweiten Wert als Fallback. Sie können auch eine andere CSS-Variable als Fallback-Wert verwenden.
Manipulieren und Überschreiben von CSS-Variablen mit JavaScript
Das Manipulieren von CSS-Variablen mit JavaScript kann eine leistungsstarke Möglichkeit sein, das Erscheinungsbild Ihrer Website im Handumdrehen zu ändern. Mithilfe von JavaScript können Sie die Werte dieser Variablen aktualisieren und sehen, wie sich die Änderungen auf Ihrer Website widerspiegeln.
Es ist wichtig zu beachten, dass die mit JavaScript vorgenommenen Änderungen nur für die aktuelle Sitzung gelten. Sie müssen entweder die Originalquelle aktualisieren oder Speichern Sie den neuen Wert auf dem Client, wie in einem Cookie, um die Änderungen beizubehalten.
Hier ist ein Beispiel für die Verwendung von JavaScript zum Aktualisieren des Werts einer CSS-Variablen.
HTML:
html>
<htmllang="de">
<Kopf>
<Titel>CSS-Variablen - SchaltflächenvariationenTitel>
<Verknüpfungrel="Stilvorlage"href="Variablen.css" />
<Skript>
FunktionFarbe ändern() {
// Holen Sie sich das Element, dessen Variable Sie ändern möchten
konst meinElement = dokumentieren.querySelector(":Wurzel");// Holen Sie sich den aktuellen Wert der Variablen
lassen aktuellerWert = getComputedStyle (meinElement).getPropertyValue(
"--sekundär"
);
// Satz Die neuWertfür Die Variable
meinElement.Stil.setProperty("- sekundär", "#DAF7A6");
}
Skript>
Kopf>
<Körper>
<div>
<h1>CSS-Variablenh1>
<div>
CSS:
:Wurzel {
--primär: #900c3f;
--sekundär: #ff5733;
}.btn {
Polsterung: 1Rest 1.5 Rest;
Hintergrund: transparent;
Schriftstärke: 700;
}
.subprimär {
Farbe: Var(--primär);
Hintergrundfarbe: Var(--sekundär);
}
In diesem JavaScript-Code ist die Farbe ändern() Die Funktion aktualisiert die Farbe der ersten Schaltfläche, wenn der Benutzer darauf klickt.
Verwenden DOM-Traversal-Methodenkönnen Sie auf die in Ihrem HTML-Dokument angewendeten Klassen oder Selektoren zugreifen und die Werte bearbeiten.
Bevor Sie auf die Schaltfläche klicken:
Nach Klick auf die Schaltfläche:
Sie können JavaScript auch verwenden, um neue CSS-Variablen zu erstellen oder sie ganz zu entfernen.
Zum Beispiel:
// Erstellen A neuVariable
dokumentieren.documentElement.style.setProperty('--neue Farbe', 'Blau');
// Eine Variable entfernen
dokumentieren.documentElement.style.removeProperty('--neue Farbe');
Verwenden von CSS-Variablen mit Präprozessoren
Die Verwendung von Variablen innerhalb der Frontend-Technologie wurde ursprünglich mit CSS-Präprozessoren wie z SASS, WENIGER und Stylus.
Der Zweck von CSS-Präprozessoren besteht darin, Code zu entwickeln, der die grundlegenden Fähigkeiten von Standard-CSS erweitert. Lassen Sie diesen Code dann in Standard-CSS kompilieren, damit der Browser ihn versteht, ähnlich wie wie TypeScript mit JavaScript funktioniert.
Mit der Entwicklung von CSS-Variablen sind Präprozessoren nicht mehr so wichtig, aber sie können immer noch einen gewissen Nutzen bieten, wenn sie in Ihrem Projekt mit CSS-Variablen kombiniert werden.
Sie können eine SASS-Variable definieren $Hauptfarbe und verwenden Sie es, um den Wert einer CSS-Variablen festzulegen. Verwenden Sie dann die CSS-Variable in einer regulären Stilklasse.
Sie können auch SASS-Funktionen verwenden, um die Werte von CSS-Variablen zu manipulieren.
Zum Beispiel:
:Wurzel {
--primary: $Hauptfarbe;
--sekundär: aufhellen (Var(--primär), 20%);
}
.btn {
Farbe: Var(--primär);
Hintergrundfarbe: Var(--sekundär);
}
Hier die SASS-Funktion erleichtern() manipuliert den Wert von --primär einen Wert zu erhalten für - sekundär.
Beachten Sie, dass auf SASS-Variablen nicht mit JavaScript zugegriffen werden kann. Wenn Sie also die Werte Ihrer Variablen zur Laufzeit manipulieren müssen, sollten Sie CSS-Variablen verwenden.
Wenn Sie CSS-Variablen und Präprozessoren zusammen verwenden, können Sie beide Vorteile nutzen, wie z Leistungsstarke Präprozessorfunktionen wie Schleifen und Funktionen sowie CSS-Variablen bieten Funktionen wie CSS Kaskadierung.
Tipps zur Verwendung von CSS-Variablen in der Webentwicklung
Hier sind ein paar wichtige Tipps, die Sie beachten sollten, damit Sie CSS-Variablen besser nutzen können.
Beginnen Sie mit einer klaren Namenskonvention
Wählen Sie eine Namenskonvention für Ihre Variablen, die sie einfach zu verstehen und zu verwenden macht. Verwenden Sie beispielsweise ein Präfix wie --Farbe- für Farbvariablen bzw --Abstand- für Abstandsvariablen.
Verwenden Sie Variablen in Medienabfragen, um Ihr Design einfach an unterschiedliche Bildschirmgrößen anzupassen.
Profitieren Sie von der kaskadierenden Natur von CSS
Denken Sie daran, dass CSS-Variablen kaskadierend sind, was bedeutet, dass, wenn Sie eine Variable für ein übergeordnetes Element festlegen, sich dies auf alle seine untergeordneten Elemente auswirkt.
Verwenden Sie CSS-Variablen mit Vorsicht
Die Verwendung zu vieler CSS-Variablen kann zu Verwirrung führen, verwenden Sie sie also mit Vorsicht und nur dann, wenn es sinnvoll ist und die Wartbarkeit Ihres Codes verbessert.
Testen Sie Ihre Variablen
CSS-Variablen sind eine einzigartige Möglichkeit, klaren und wartbaren Code in Ihr Stylesheet zu schreiben.
Es ist wichtig zu beachten, dass sie immer noch nicht von allen Browsern vollständig unterstützt werden. Daher sollten Sie Ihre Variablen auf Browserkompatibilität testen, um sicherzustellen, dass sie wie erwartet funktionieren und dass alle Fallback-Werte wie erwartet funktionieren.