CSS -Variablen verstehen (und wie man sie benutzt)
Veröffentlicht: 2025-07-13CSS -Variablen sind wie wiederverwendbare Designzutaten. Sie definieren sie einmal als Markenfarben, Schriftgrößen oder Abstand und verwenden sie dann, wo immer es benötigt wird. Sie speichern Sie vor dem Eingeben der gleichen Hex -Codes und Pixelwerte über verschiedene Abschnitte.
Ihr größter Vorteil ist, wie einfach sie zu aktualisieren sind. Wenn Sie einmal eine Variable aktualisieren, spiegelt jeder Ort, an dem er verwendet wird, auch die Änderungen wider. Sie vermeiden also nicht nur, dass Sie die gleichen Werte in mehreren Abschnitten manuell wiederholen, sondern auch den Look der gesamten Website optimieren, indem Sie nur einen Wert ändern.
Hier wird es noch besser: Mit Divi 5 müssen Sie keinen Code schreiben, um CSS -Variablen zu verwenden. Mit Divi-Designvariablen können Sie sie in einem visuellen Workflow ohne Code verwenden. Neugierig, wie es funktioniert? Lesen Sie weiter.
- 1 Was sind CSS -Variablen?
- 1.1 Wie CSS -Variablen funktionieren
- 1.2 CSS -Variablen verstehen Kaskade
- 1.3 Hinzufügen eines Fallback -Wertes
- 2 Ein Code-Weg, um CSS-Variablen in Divi 5 zu verwenden
- 2.1 CSS -Variablen in Divi 5 definieren
- 3 Wie Divi 5 CSS variable Workflows mühelos macht
- 3.1 1. Erstellen Sie Ihr Design -Framework
- 3.2 2. Verwenden Sie Optionsgruppenvoreinstellungen für ein flexibles Styling
- 3.3 3.. Deklarieren Sie benutzerdefinierte CSS -Variablen für mehr Kontrolle
- 4 Divi bietet einen integrierten Ansatz für CSS-Variablen
Was sind CSS -Variablen?
Stellen Sie sich CSS -Variablen als benutzerdefinierte Beschriftungen vor, die Sie für Ihre eigenen Designgewohnheiten erstellen. Was ist dein Randradius von Bilde? Wie viel Abstand verlassen Sie normalerweise zwischen Abschnitten? Haben Sie eine Signature -Schaltfläche, die Sie überall verwenden? Sie können all diese einzigartigen Stile in CSS -Variablen verwandeln.
Dies sind keine Werte, die der Browser standardmäßig kennt. Alles ist individuell. Sie entscheiden den Namen, weisen Ihren bevorzugten Wert zu und verwenden ihn, wo immer Sie möchten. Es ist, als würde man eine eigene Abkürzung erstellen, die das Styling schneller, sauberer und später einfacher zu aktualisieren macht.
Nehmen wir ein Beispiel. Angenommen, Sie möchten, dass die primäre Farbe Ihrer Website #007BFF ist. Sie würden es so deklarieren:
:root {
--primary-color: #007bff;
}
Hier ist „Primary-Color“ Ihr variabler Name und „#007BFF“ ist sein Wert. Sie haben gerade eine Farbe in einem benutzerdefinierten Etikett gespeichert, den der Browser jetzt erkennen kann.
Um es zu verwenden, schreiben Sie den Hex -Code nicht um. Sie nennen die Variable in der Funktion var () wie folgt:
button {
background-color: var(--primary-color);
}Diese eine Codezeile stellt sicher, dass Ihre Taste immer den Wert von-Primary-Color bezieht.
Jetzt können Sie es überall dort verwenden, wo es benötigt wird, und wenn es Zeit ist, Ihre Markenfarbe zu aktualisieren, müssen Sie Dutzende von Dateien nicht durchgraben. Ändern Sie einfach die Variable einmal und jedes Element, in dem es verwendet wird, wird automatisch aktualisiert. Zum Beispiel verwenden Ihre Tasten, Überschriften und Grenzen alle-Primary-Color. Ein einzelner Bearbeiten aktualisiert sie alle.
So vereinfachen CSS-Variablen die ortsweiten Updates.
Wie CSS -Variablen funktionieren
Um eine CSS -Variable zu deklarieren, sieht die grundlegende Syntax so aus:
.root {
--name: value;
} Ein paar Dinge zu beachten. Erstens beginnt eine CSS -Variable immer mit zwei Strichen ( -). So weiß der Browser, dass er individuell ist, was Sie für Ihr Designsystem definiert haben.
Eingebaute CSS-Eigenschaften wie Schriftgröße, Farbe oder Polsterung haben bereits eine Bedeutung. Der Browser weiß genau, was er mit ihnen machen soll. Benutzerdefinierte Eigenschaften sind jedoch leere Beschriftungen, bis Sie ihnen einen Wert zuweisen. Sie erstellen Ihre eigenen Designregeln in einem Website-Projekt wie-Primary Color, und sagen dem Browser, wofür es steht.
Wo Sie Ihre CSS -Variablen definieren, macht auch einen großen Unterschied.
Wenn Sie es in den Root -Selektor platzieren (wie oben), wird es global. Das heißt, Sie können die Variable auf jeder Seite und jedem Element verwenden. Das liegt daran, dass das Root auf das Element der obersten Ebene Ihres HTML abzielt, normalerweise das <html> -Tag.
Wenn Sie jedoch dieselbe Variable innerhalb einer bestimmten Klasse oder eines bestimmten Selektors definieren, funktioniert sie nur an dieser einen Stelle. So was:
.card {
--bg-color: #f4f4f4;
} Hier gilt –BG-Color nur im .card-Selektor. Versuchen Sie es anderswo, und es wird nicht angezeigt. Im Folgenden sehen Sie beispielsweise zwei Karten.
Card 1 verwendet eine lokal definierte Variable-Card-BG, die im Card-Container deklariert ist. Diese Variable funktioniert nur in diesem Behälter. Es gilt nicht in Karte 3.
Karte 2 hingegen zieht ihren Hintergrund von-Global-Color, was in: Wurzel definiert ist. Deshalb nimmt Card 4 auch die gleiche Farbe auf. Es hat Zugriff auf die globale Variable.
Als Best Practice definieren Sie, wenn Sie Konsistenz über Ihre gesamte Website möchten, immer CSS -Werte in: root. Was ist, wenn Sie eine Variable lokal definiert und sie vergessen haben, aber jetzt nicht wie erwartet funktioniert? Sie werden dies beheben, indem Sie einen Fallback -Wert festlegen. Wir werden in einiger Zeit darüber sprechen.
Verständnis von CSS -Variablen Kaskade
Möglicherweise sind Sie mit dem Begriff „Kaskade“ vertraut. Nun, CSS -Variablen auch kaskaden, aber was bedeutet das?
Wenn eine Variable sowohl global (in: root) als auch lokal (in einer Klasse oder einem Container) definiert wird, verwendet der Browser immer den einen näher am Element. So funktioniert Caskading in CSS. Nahe Regeln haben Priorität.
Und genau so funktioniert der dunkle Modus.
Zum Beispiel können Sie –textfarben definieren: schwarz in: root. In einem .dark-Mode-Behälter können Sie es jedoch als weiß neu definieren. Wenn der Benutzer die Option Dark Modus umschaltet, verwendet der Browser die lokale Version innerhalb von .dark-Mode, obwohl der Variablenname gleich bleibt.
Auf diese Weise können Sie Ihre Benennung konsistent halten, während Sie die Stile basierend auf dem Kontext anpassen. Es ist eine Möglichkeit, wie CSS -Variablen über die einfache Wiederverwendbarkeit hinausgehen. Sie passen sich an, wo und wie sie verwendet werden.
Hinzufügen eines Fallback -Wertes
Manchmal können Sie auf eine CSS -Variable verweisen, die nicht verfügbar ist. Vielleicht wurde es nur in einem bestimmten Abschnitt definiert oder versehentlich entfernt. In diesem Fall weiß der Browser nicht, was zu tun ist. Die Stile, die von dieser Variablen abhängen, werden einfach nicht angewendet.
Sie können einen Fallback -Wert direkt in die Funktion var () hinzufügen, um dies zu verhindern. Es dient als Backup, falls die ursprüngliche Variable fehlt. So funktioniert es:
h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} Dies sagt, dass der Browser, wenn es vorhanden ist, die Köpfe verwenden soll. Wenn nicht, verwenden Sie stattdessen Schwarz (#000).
Fallbacks sind besonders nützlich, wenn sie wiederverwendbare Komponenten erstellen oder über mehrere Abschnitte hinweg arbeiten, in denen möglicherweise nicht immer Variablen verfügbar sind. Sie halten Ihr Design stabil und konsequent.
Sie können sogar Fallbacks wie Farbe ketten: var (accent-color, var (-Primary-Color, #333));
Hier prüft der Browser zuerst nach-Akzentfarbe. Wenn es fehlt, versucht es-Primärfarbe. Wenn das auch fehlt, ist es standardmäßig #333. Dies verleiht Ihren Stilen ein Sicherheitsnetz, sodass sie weiterhin korrekt rendern, auch wenn einige Werte fehlen.
Eine Möglichkeit, CSS-Variablen in Divi 5 zu verwenden
Alles, was Sie über CSS -Variablen gesehen haben (die globale Steuerung, die wiederverwendbaren Werte, die Kaskadierungslogik), klingt großartig, aber sie enthält auch einen Haken: Sie müssen Code schreiben und verwalten. Für viele Designer ist das nicht ideal. Was ist, wenn Sie visuelles Design bevorzugen? Das heißt, Sie können keine CSS -Variablen verwenden, oder? Falsch.
Divi 5 gibt Ihnen eine schnellere und visuelle Möglichkeit, mit derselben CSS -Variablen Logik zu arbeiten. Es führt Entwurfsvariablen ein, eine No-Code-Alternative zu CSS-Variablen, die direkt in den Divi-Builder aufgebaut sind.
Abonnieren Sie unseren YouTube -Kanal
Entwurfsvariablen ( wie CSS -Variablen) sind wiederverwendbare Werte, die Sie einmal definieren und auf Ihrer Website verwenden . Was anders ist ist, wie Sie es tun. Sie definieren sie nicht im Stylesheet Ihrer Website, sondern im variablen Manager im Divi Builder visuell.
Wie CSS -Variablen geben Sie einer Designvariablen einen Namen an und weisen einen Wert zu. Sobald es gespeichert ist, wird es in jedem Modul verfügbar, das diese Eigenschaft unterstützt.
Das Anwenden der gespeicherten Variablen ist ebenfalls einfach. Suchen Sie einfach das Symbol für Variable Manager , indem Sie über die Option "Einstellungen der Modul" schweben, darauf klicken, um alle Ihre gespeicherten Variablen zu füllen, und die Auswahl dessen, die Sie anwenden möchten.
Das Beste an Designvariablen ist, dass nicht nur Designwerte, sondern auch wiederholbare Inhaltswerte wie Bilder, Links und Textzeichenfolgen speichern können. Auf diese Weise verwalten Sie wiederholte Inhalte effektiv, indem Sie gemeinsame Inhaltselemente auf Ihrer Website ohne manuelle Arbeit wiederverwenden.
Erfahren Sie alles über die Designvariablen von Divi 5
Definieren Sie CSS -Variablen in Divi 5
Ersetzen dies aus Designvariablen CSS -Variablen? Nicht genau.
Designvariablen eignen sich hervorragend zum Speichern der Werte, die Sie häufig verwenden, wie Markenfarben, aber nicht jeder Stil muss global sein. Sie möchten nicht immer jede kleine Optimierung als Designvariable speichern, insbesondere wenn es auf eine einzelne Seite einzigartig ist.
Angenommen, Sie erstellen eine Zielseite mit einem benutzerdefinierten Heldenbereich. Die Höhe unterscheidet sich von allem anderen auf der Website, und es ist unwahrscheinlich, dass Sie es wiederverwenden. Das Speichern dieser als Designvariable ist nicht die beste Verwendung Ihrer globalen Bibliothek. In diesem Fall ist das Definieren einer CSS -Variablen direkt in den Seiteneinstellungen eine sauberere Wahl.
Gleiches gilt für komplexe oder einmalige Layouts. Vielleicht benötigen Sie eine benutzerdefinierte Highlight-Farbe oder einen layoutspezifischen Abstandswert, der in diesem Zusammenhang nur relevant ist. Anstatt Ihr System mit Variablen zu verdrängen, werden Sie nie wiederverwenden. Sie können CSS -Variablen genau dort definieren, wo Sie sie benötigen.
Wir möchten nicht, dass Sie CSS -Variablen durch Designvariablen ersetzen. Wir möchten, dass Sie das Beste von beiden verwenden.
Deshalb erleichtert Divi 5 die Definition von CSS -Variablen. Sie können Ihre eigenen CSS -Variablen in Seiteneinstellungen> Erweitert> benutzerdefinierte CSS problemlos deklarieren, genau wie Sie in regulärem CSS tun würden.
Aber wir vereinfachen ihre Anwendung für Sie. Sobald Sie definiert sind, können Sie diese Variablen auf dieser Seite verwenden. Gehen Sie zu einem beliebigen Modul, wählen Sie CSS VAR aus der Dropdown -Down -Down -Abteilung erweiterte Einheiten und geben Sie den Variablennamen in der Funktion var () ein.
Dieser Ansatz gibt Ihnen bei Bedarf Flexibilität, ohne Sie dazu zu zwingen, alles für das visuelle Design -System zu verpflichten. Es ist ein Gleichgewicht zwischen Struktur und kreativer Freiheit.
Verwenden von CSS -Variablen in Divi 5
Wie Divi 5 CSS variable Workflows mühelos macht
Jetzt, da Sie wissen, welche CSS -Variablen sie sind und wie Divi 5 sie visuell unterstützt, ist dies wirklich wichtig. Es liegt nicht nur daran, dass Divi Ihnen zwei Möglichkeiten gibt, CSS -Variablen zu verwenden. Es liegt daran, dass sie reibungslos in Ihren Workflow integrieren.
Sie können CSS -Variablen problemlos mit leistungsstarken Funktionen wie Designvariablen, Voreinstellungen für Optionengruppen und erweiterten Einheiten verwenden. Sie erhalten immer noch die Flexibilität und Skalierbarkeit herkömmlicher CSS, ohne jedoch eine einzige Codezeile zu schreiben, es sei denn, Sie wählen.
Lassen Sie uns durchgehen, wie Divi 5 diesen Workflow zum Leben erweckt.
1. Erstellen Sie Ihr Design -Framework
Designvariablen sind wirklich leistungsstark, da Sie Ihr gesamter Design -Framework visuell erstellen können. Daher erfordert das Styling einer Seite nur wenige Klicks. Wir empfehlen, mit Ihren Basisdesignelementen wie Schriftgrößen, Abstandseinheiten und Markenfarben zu beginnen, sodass Sie alle an einem Ort haben.
Dann können Sie auch häufig verwendete Inhalte wie Textzeichenfolgen, URLs und Bilder speichern. Zum Beispiel ein gemeinsames Hintergrundmotiv, das sich in verschiedenen Abschnitten, Links in sozialen Medien, E -Mail, Adresse usw. wiederholt, usw.
Sobald Sie Ihr Framework haben, wird alles einfacher. Sie müssen nicht zu einem Root Stylesheet zurückkehren, um eine Variable zu finden oder genaue Namen zu erinnern. Divi organisiert sie für Sie: Farben auf der Registerkarte Farben , Schriftarten in der Registerkarte Schriftart und alle zugänglich im Variablenmanager .
Und wenn Ihre Website ein Design -Update benötigt, verschwenden Sie kein Zeitaufbaumodul für Modul oder Jagd durch ein langwieriges Stylesheet. Sie aktualisieren Ihren gespeicherten Wert einmal im Variablenmanager und Ihre Änderungen gelten sofort in jeder Instanz.
Die gleiche Kontrolle auf CSS-Ebene, aber ohne die Notwendigkeit, etwas auswendig zu merken, zu schreiben oder zu debuggen.
2. Verwenden Sie Optionsgruppenvoreinstellungen für flexibles Styling
Option Gruppenvoreinstellungen bieten Ihnen eine detailliertere Kontrolle über Ihr Designsystem. Anstatt einen einzelnen Satz von Stilen auf Ihrer Website anzuwenden, können Sie mehrere Gruppen von Designoptionen für verschiedene Anwendungsfälle erstellen, die alle aus denselben Basis -Designvariablen erstellt wurden.
Hier schichten Sie Stile. Sie definieren Ihre Kernwerte einmal im Variablenmanager und erstellen dann verschiedene Voreinstellungen, die diese Werte abrufen, sie jedoch auf leicht unterschiedliche Weise anwenden. Wenn Sie jemals einen gespeicherten variablen Wert aktualisieren, reflektiert die Änderung sofort über alle Ihre Voreinstellungen und Module, in denen sie angewendet werden.
Mit diesem voreingestellten Designsystem können Sie unbegrenzte Styling-Kombinationen erstellen. Zum Beispiel haben Sie möglicherweise einen Übergangsstil für Ihren Homepage -Helden und einen anderen für Blog -Titel, beide mit derselben Schriftgrößenvariablen, jedoch mit unterschiedlichem Abstand, Gewichten oder Textveränderungen.
Die Struktur bleibt sauber. Das Styling bleibt konsistent. Bei Bedarf können Sie jede voreingestellte Voreinstellung auf Modulebene überschreiben. Sie erhalten also eine systemweite Kontrolle, ohne die kreative Freiheit zu verlieren.
3. Deklarieren Sie benutzerdefinierte CSS -Variablen für mehr Kontrolle
Wie Sie wissen, sperrt Divi Sie nicht aus der fortgeschrittenen Kontrolle. Wenn Sie Ihre eigenen CSS -Variablen definieren möchten, können Sie dies absolut über Seiteneinstellungen> Erweitert> benutzerdefinierte CSS tun. Aber das ist nicht der lustige Teil.
Was Spaß macht ist, dass Sie leistungsstarke CSS -Funktionen wie Clamp () und Cal () (dank fortgeschrittener Einheiten) verwenden können, um flüssige und reaktionsschnelle Layouts visuell zu bauen. Sie können auch Ihre gespeicherten CSS -Variablen als Werte für Ihre Entwurfsvariablen verwenden.
Auf diese Weise können Sie ein miteinander verbundenes Designsystem aufbauen. Ihr CSS -Logik und Ihr visuelles Styling existieren nicht mehr in separaten Silos. Sie können einen Wert einmal in CSS definieren und dort visuell herausziehen. Es hält Ihre Workflow flüssig, skalierbar und leicht zu warten.
Vielleicht finden Sie das alles überwältigend, aber sobald Sie verstehen, wie es zusammen funktioniert, gibt es kein Zurück. Es verändert die Art und Weise, wie Sie entwerfen, denken und bauen. Was als Variablensystem beginnt, wird schnell zu Ihrer Designsprache. Und ja, diese Tools sind leistungsstark, aber sie sollen sich um Ihren Prozess befassen. Nehmen Sie sich Zeit, erkunden Sie, was zu Ihrem Stil passt, und erstellen Sie einen Workflow, der für Sie funktioniert.
Divi bietet einen integrierten Ansatz für CSS-Variablen
Entwerfen mit CSS -Variablen, die zur Auswahl zwischen Flexibilität und Komplexität verwendet werden. Divi 5 löscht und bringt die volle Leistung von Variablen, visuellen Steuerung, ortsweiten Updates und geschichteten Logik in einen intuitiven und skalierbaren Workflow ein.
Sie müssen nicht zwischen benutzerdefiniertem CSS und No-Code-Design wählen. Sie können Ihr System mit zunehmender Projekte mischen, übereinstimmen und weiterentwickeln. Und sobald Sie sehen, wie reibungslos und mächtig das sein kann, ist es kaum vorstellbar, dass es auf andere Weise aufgebaut wird. Aber dafür müssen Sie die Kontrolle in Ihre Hände übernehmen.
Probieren Sie Divi 5 für sich selbst aus und erstellen Sie ein Designsystem, das mit Ihnen zusammenarbeitet, nicht gegen Sie.