Wozu dient die CSS-Variable var()? Detaillierte Erläuterung der Verwendung der CSS-Variablen var()

Wenn ein Webprojekt größer wird, kann sein CSS astronomisch groß und unübersichtlich werden. Um uns bei der Lösung dieses Problems zu helfen, werden in Kürze neue CSS-Variablen in den wichtigsten Browsern erscheinen, die es Entwicklern ermöglichen, wiederkehrende CSS-Eigenschaften wiederzuverwenden und einfach zu bearbeiten. Jeder, der SASS oder Less verwendet hat, sollte wissen, wie großartig seine 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! [Empfohlene Lektüre: CSS-Tutorial]

CSS-Variablen definieren und verwenden

Variablen folgen wie jede andere CSS-Definition denselben Geltungsbereichs- und Vererbungsregeln. Der einfachste Weg, sie zu verwenden, besteht darin, sie global verfügbar zu machen, indem man die Deklaration zur Pseudoklasse :root hinzufügt, damit alle anderen Selektoren sie erben können.

html:

:root {
  --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 {
background-color:var(--awesome-blue);
}

Browser-Unterstützung

Häufig verwendete Browser außer IE werden perfekt unterstützt. Weitere Details finden Sie hier – [Ich kann CSS-Variablen verwenden](https://caniuse.com/#search= var()). 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 – Designfarben

Variablen in CSS sind am nützlichsten, wenn wir dieselben Regeln immer wieder auf mehrere Elemente anwenden müssen, wie zum Beispiel sich wiederholende Farben in einem Design. Anstatt jedes Mal, wenn wir dieselbe Farbe wiederverwenden möchten, zu kopieren und einzufügen, fügen wir sie in eine Variable ein und greifen von dort aus darauf zu.

Wenn unserem Kunden nun 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 Themas zu ändern. Ohne Variablen müssen wir jedes Vorkommen manuell suchen und ersetzen.

Kopieren Sie den Code und testen Sie ihn in Ihrem Editor

* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h3 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<!-- 分割线 -->:root {
--primary-color: #B1D7DC;
--accent-color: #FF3F90;
}
html {
background-color: var(--primary-color);
}
h3 {
border-bottom: 2px solid var(--primary-color);
}
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
}

<div class="container">
<h3>对话框窗口</h3>
<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>
<button>确认</button>
</div>

Beispiel 2 – Lesbarkeit des Attributklassennamens

Eine weitere wichtige Verwendung von Variablen ist, wenn wir sie nicht haben möchten um es uns zu merken, wenn wir komplexere Eigenschaftswerte speichern möchten. Das beste Beispiel ist die Verwendung mehrerer Parameter, wie z. B. der CSS-Regeln „box-shadow“, „transform“ und „font“.

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

html{background-color: #F9F9F9;}
ul{padding: 20px;list-style: none;width: 300px;}
li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;}
<!-- 分割线 -->
:root{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
box-shadow: var(--tiny-shadow);
}
li:hover{
transform: var(--animate-right);
}

<ul>
<li>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>

Beispiel 3 – Variablen dynamisch ändern

Standardregeln helfen bei der Lösung von Konflikten, wenn eine benutzerdefinierte Eigenschaft mehrmals deklariert wird und die zuletzt im Stylesheet definierte Eigenschaft die oben definierten überschreibt.

Das folgende Beispiel zeigt, wie einfach es für Benutzer ist, Eigenschaften dynamisch zu ändern und dabei den Code dennoch klar und prägnant zu halten.

.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<!-- 分割线 -->
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
font-size: var(--main-text);
}

<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：
var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：

width``: var(–custom-width, 20%``);

Benutzerdefinierte Eigenschaften können verschachtelt werden:

*   –base-color: #f93ce9;
*   –background-gradient: linear-gradient(to top, var(–base-color), #444);

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

*   –container-width: 1000px;
*   max-width: calc(var(–container-width) / 2);

Das obige ist der detaillierte Inhalt vonWozu dient die CSS-Variable var()? Detaillierte Erläuterung der Verwendung der CSS-Variablen var(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!