Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

Wenn ein Webprojekt immer größer wird, werden seine CSS astronomisch groß und unübersichtlich. Um uns bei der Lösung dieses Problems zu helfen, werden in Kürze neue CSS-Variablen in den wichtigsten Browsern verfügbar sein, die es Entwicklern ermöglichen, wiederkehrende CSS-Eigenschaften wiederzuverwenden und einfach zu bearbeiten. Jeder, der SASS oder Less verwendet hat, weiß, wie großartig die Variablenfunktion ist, aber diese Variablen sind Präprozessoren und müssen vor der Verwendung kompiliert werden. Da Variablen jetzt in Vanilla-CSS verfügbar sind, können Sie sie sofort in Ihrem Browser verwenden!

Definieren und Verwenden von CSS-Variablen

Für Variablen gelten die gleichen Gültigkeits- und Vererbungsregeln wie für jede andere CSS-Definition. Die einfachste Möglichkeit, sie zu verwenden, besteht darin, sie global verfügbar zu machen, indem Sie die Deklaration zur Pseudoklasse :root hinzufügen, sodass alle anderen Selektoren sie erben können.

:Wurzel {
  --awesome-blue:#2196F3;
}

Um auf den Wert in einer Variablen zuzugreifen, können wir die var(...)-Syntax verwenden. Beachten Sie, dass bei Namen die Groß-/Kleinschreibung beachtet wird, also –foo != –FOO .

.element {
Hintergrundfarbe: var (--awesome-blue);
}

Browserunterstützung

Es wird von allen gängigen Browsern außer IE perfekt unterstützt, weitere Details erhalten Sie hier – ich kann CSS-Variablen verwenden. Nachfolgend finden Sie einige Beispiele, die typische Verwendungen von CSS-Variablen zeigen. Um sicherzustellen, dass sie ordnungsgemäß funktionieren, versuchen Sie, sie in einem der oben genannten Browser anzuzeigen.

Beispiel 1 – Themenfarben

Variablen in CSS sind besonders nützlich, wenn wir dieselben Regeln immer wieder auf mehrere Elemente anwenden müssen, wie etwa bei der Wiederholung von Farben in einem Design. Anstatt jedes Mal, wenn wir die gleiche Farbe wiederverwenden möchten, sie zu kopieren und einzufügen, fügen wir sie in eine Variable ein und greifen von dort darauf zu.

Wenn unseren Kunden der von uns gewählte Blauton nicht gefällt, können wir den Stil an einer Stelle (der Definition der Variablen) ändern, um die Farbe des gesamten Designs zu ändern. Ohne Variablen müssen wir jedes Vorkommen manuell suchen und ersetzen.

Sie können den Code kopieren und in Ihrem Editor testen

* {Rand: 0;Padding: 0;Boxgröße: Rahmenbox;}html {Padding: 30px;Schriftart: normal 13px/1,5 serifenlos;Farbe: #546567;Hintergrundfarbe: var(--primary-color);}.Container {Hintergrund: #fff;Padding: 20px;}h3 {Padding-Bottom: 10px;Margin-Bottom: 15px;}p {Hintergrundfarbe: #fff;Margin: 15px 0;}Schaltfläche {Schriftgröße: 13px;Padding: 8px 12px;Hintergrundfarbe: #fff;Rahmenradius: 3px;Boxschatten: keiner;Texttransform: Großbuchstaben;Schriftstärke: fett;Cursor: Zeiger;Deckkraft: 0,8;Umriss: 0;}Schaltfläche:Hover {Deckkraft: 1;}
<!-- Trennlinie-->:root {
--Primärfarbe: #B1D7DC;
--Akzentfarbe: #FF3F90;
}
html {
Hintergrundfarbe: var(--primary-color);
}
h3 {
Rahmen unten: 2px durchgehend var(--primary-color);
}
Taste {
Farbe: var(--accent-color);
Rand: 1px durchgezogen, var(--accent-color);
}

<div Klasse="Container">
<h3>Dialogfenster</h3>
<p>Es ist einfach, ein Bohemien-Leben zu führen, aber es ist schwierig, gute Freunde zu finden. </p>
<button>Bestätigen</button>
</div>

Beispieladresse

Beispiel 2 – Lesbarkeit des Attributklassennamens

Ein weiterer wichtiger Einsatzzweck von Variablen besteht darin, dass wir einen komplexeren Eigenschaftswert speichern möchten, sodass wir ihn uns nicht merken müssen. Das beste Beispiel hierfür sind CSS-Regeln mit mehreren Parametern wie Box-Shadow, Transform und Font.

Indem wir die Eigenschaft in einer Variable platzieren, können wir über einen semantisch lesbaren Namen darauf zugreifen.

html{Hintergrundfarbe: #F9F9F9;}
ul{padding: 20px;Listenstil: keiner;Breite: 300px;}
li{Schriftart: normal 18px sans-serif;Polsterung: 20px;Übergang: 0,4 s;Rand: 10px;Farbe: #444;Hintergrundfarbe: #fff;Cursor: Zeiger;}
<!-- Trennlinie-->
:Wurzel{
--winziger Schatten: 0 2px 1px 0 rgba(0, 0, 0, 0,2);
--animieren-rechts: translateX(20px);
}
li{
Kastenschatten: var(--tiny-shadow);
}
li:hover{
transformieren: var(--animate-right);
}

<ul>
<li>Ich bin hier!</li>
<li>Ich bin hier!</li>
<li>Ich bin hier!</li>
</ul>

Beispieladresse

Beispiel 3 – Dynamisch veränderliche Variablen

Wenn benutzerdefinierte Eigenschaften mehrfach deklariert werden, helfen Standardregeln bei der Lösung von Konflikten; die letzte Deklaration in einem Stylesheet überschreibt die darüber liegenden.

Das folgende Beispiel zeigt, wie einfach es ist, Eigenschaften dynamisch zu ändern und dabei den Code trotzdem klar und prägnant zu halten.

*{Rand: 0;Polsterung: 0;Boxgröße: Rahmenbox;}
html{Hintergrund: #eee;Polsterung: 30px;Schriftart: 500 14px serifenlos;Farbe: #333;Zeilenhöhe: 1,5;}
.blue-container{Hintergrund: #64B5F6;Padding-left: 50px;}
.green-container{Hintergrund: #AED581;Padding-left: 50px;}
.container{Hintergrund: #fff;Padding: 20px;}
p{Übergang: 0,4 s;}
.title{Schriftstärke: fett;}
<!-- Trennlinie-->
.blauer-Container{
--Titeltext: 18px;
--Haupttext: 14px;
}
.blauer-Container:hover{
--Titeltext: 24px;
--Haupttext: 16px;
}
.grüner-Container:hover{
--Titeltext: 30px;
--Haupttext: 18px;
}
.Titel{
Schriftgröße: var(--title-text);
}
.Inhalt{
Schriftgröße: var(--main-text);
}

<div Klasse="blauer-Container">
<div Klasse="grüner-Container">
<div Klasse="Container">
<p class="title">Dies ist ein Titel</p>
<p class="content">Bewegen Sie die Maus über die verschiedenfarbigen Bereiche, um die Größe dieses Textes und Titels zu ändern. </p>
</div>
</div>
</div>

Beispieladresse

Wie Sie sehen, sind CSS-Variablen sehr einfach und leicht zu verwenden, und Entwickler müssen nicht viel Zeit aufwenden, um sie überall anzuwenden. Hier sind die Erweiterungen:

Die Funktion var() verwendet zwei Parameter, mit denen Fallbackwerte bereitgestellt werden können, wenn die benutzerdefinierte Eigenschaft fehlschlägt:

Breite: var(--custom-width, 20%);

Benutzerdefinierte Eigenschaften können verschachtelt werden:

• –Grundfarbe: #f93ce9;
• –Hintergrundgradient: linearer Gradient (nach oben, var (–Basisfarbe), #444);

Variablen können in Verbindung mit einer weiteren Neuerung in CSS verwendet werden – der Funktion calc().

• –Containerbreite: 1000px;
• maximale Breite: calc(var(–container-width) / 2);

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.