Lassen Sie sich Schritt für Schritt durch 5 Beispiele führen, um sich mit CSS-Variablen vertraut zu machen!

Kennen Sie sich mit CSS-Variablen aus? Wenn Sie damit nicht vertraut sind, machen Sie sich keine Sorgen! Der folgende Artikel stellt Ihnen CSS-Variablen vor und macht Sie anhand von 5 Beispielen mit CSS-Variablen vertraut. Ich hoffe, er wird Ihnen hilfreich sein!

Je größer Webanwendungen werden, desto größer, ausführlicher und unübersichtlicher wird CSS. Die Verwendung von CSS-Variablen in einem guten Kontext bietet uns einen Mechanismus zur Wiederverwendung und einfachen Änderung wiederkehrender CSS-Eigenschaften.

Bevor es reine CSS-unterstützte Variablen gab, hatten wir Präprozessoren wie Less und Sass. Sie müssen jedoch vor der Verwendung kompiliert werden, wodurch (manchmal) eine zusätzliche Komplexitätsebene entsteht.

So definieren und verwenden Sie CSS-Variablen (auch benutzerdefinierte Eigenschaften genannt)

Um eine einfache JS-Variable zu deklarieren, gehen Sie ganz einfach wie folgt vor:

let myColor = "green";

Um eine CSS-Variable zu deklarieren, müssen Sie vor dem Namen der Variablen etwas hinzufügen Zwei horizontale Linien.

body {
    --english-green-color: #1B4D3E;
}

Um nun den Wert einer CSS-Variablen zu verwenden, können wir die Funktion var(...) verwenden. var(...)函数。

.my-green-component{
    background-color: var(--english-green-color);
}

管理CSS变量的最简单方法是将它们声明在:root伪类中。 鉴于CSS变量与其他CSS定义一样都遵循规则，因此将它们放在:root中将确保所有选择器都可以访问这些变量。

:root{
    --english-green-color: #1B4D3E;
}

览器对CSS变量的支持情况

浏览器对CSS变量的支持一点也不差。 如果查看 Can I Use CSS Variables 那会发现所有主流浏览器都支持CSS变量。 无论是在移动设备还是 PC 上。

现在，让我们看看这些CSS变量的实际作用。

示例1-管理颜色

使用CSS变量的最佳选择之一就是设计的颜色。 不必一遍又一遍地复制和粘贴相同的颜色，我们只需将它们放在变量中即可。

如果有该死的产品要我们更新特定的绿色阴影或将所有按钮设置为红色而不是蓝色，则只需更改该CSS变量的值即可。 我们无需搜索并替换所有出现的该颜色。

动手试试：https://codesandbox.io/s/8kkyl4mlm9?from-embed

示例2-删除重复的代码

通常我们需要构建一些组件的不同变体。相同的基本样式，只是功能略有不同。我们举例使用一个带有不同颜色按钮的案例。

.btn {
  border: 2px solid black;
  // more props here
}

.btn:hover {
  background: black;
  // more props here
}

.btn.red {
  border-color: red
}
.btn.red:hover {
  background: red
}

像这样使用它们：

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

但是，这会增加一些代码重复。在.red类中，我们必须将边框颜色和背景都设置为红色。万一哪天需要更改颜色，那就很麻烦了，需要一个一个的改。这个问题可以通过CSS变量轻松解决。

.btn {
    border: 2px solid var(--color, black);
}
.btn:hover {
    background: var(--color, black);
}
.btn.red {
    --color: red
}

动手试试：https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

示例3-使某些属性易于阅读

如果我们想为更复杂的属性值创建快捷方式，那么CSS 变量非常有用，这样我们就不必记住它了。

CSS属性，如box-shadow、transform和font

// 主要代码
:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}
li {
  box-shadow: var(--tiny-shadow);
}
li:hover {
  transform: var(--animate-right);
}

Der einfachste Weg, CSS-Variablen zu verwalten, besteht darin, sie in der Pseudoklasse :root zu deklarieren. Da CSS-Variablen denselben Regeln folgen wie andere CSS-Definitionen, stellt die Platzierung in :root sicher, dass alle Selektoren auf diese Variablen zugreifen können.

// 主要代码
.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}

Browser-Unterstützung für CSS-Variablen

Die Browser-Unterstützung für CSS-Variablen ist überhaupt nicht schlecht. Wenn Sie sich „Kann ich CSS-Variablen verwenden“ ansehen, werden Sie feststellen, dass alle gängigen Browser CSS-Variablen unterstützen. Egal ob auf dem Handy oder PC.

Jetzt , sehen wir uns an, was diese CSS-Variablen tatsächlich bewirken.

Beispiel 1 – Farben verwaltenEine der besten Optionen für die Verwendung von CSS-Variablen ist die Farbe Ihres Designs. Anstatt dieselben Farben immer wieder zu kopieren und einzufügen, können wir sie einfach in Variablen einfügen.

Wenn es ein verdammtes Produkt gibt, das möchte, dass wir einen bestimmten Grünton aktualisieren oder alle Schaltflächen rot statt blau machen, können wir einfach den Wert dieser CSS-Variablen ändern. Wir müssen nicht alle Vorkommen dieser Farbe suchen und ersetzen.

Probieren Sie es selbst aus: https://codesandbox.io/s/8kkyl4mlm9?from-embed

Beispiel 2 – Doppelten Code entfernen

Oft müssen wir verschiedene Variationen einiger Komponenten erstellen. Gleicher Grundstil, nur leicht unterschiedliche Funktionalität. Nehmen wir ein Beispiel mit Schaltflächen in verschiedenen Farben.

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

Verwenden Sie sie wie folgt:

width: var(--custom-width, 33%);

Dies führt jedoch zu einer gewissen Codeduplizierung. In der Klasse .red müssen wir sowohl die Rahmenfarbe als auch den Hintergrund auf Rot setzen. Wenn Sie die Farbe eines Tages ändern müssen, ist das sehr mühsam und Sie müssen sie einzeln ändern. Dieses Problem lässt sich leicht mit CSS-Variablen lösen.

<!--HTML-->
<html style="--size: 600px">

Probieren Sie es selbst aus: https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

Beispiel 3 – Machen Sie einige Eigenschaften leicht lesbar🎜🎜Wenn wir einige Eigenschaften erstellen möchten Komplexere CSS-Variablen sind sehr nützlich, um Verknüpfungen zu Attributwerten zu erstellen, damit wir sie uns nicht merken müssen. 🎜🎜CSS-Eigenschaften wie box-shadow, transform und font oder andere CSS-Regeln mit mehreren Parametern sind gute Beispiele. 🎜🎜Wir können die Eigenschaft in eine Variable einfügen, damit wir sie in einem besser lesbaren Format wiederverwenden können. 🎜

body {
  max-width: var(--size)
}

🎜🎜Probieren Sie es selbst aus: https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜Beispiel Level 4- VERBUNDENE VARIABLEN 🎜🎜Standardkaskadierungsregeln gelten auch für CSS-Variablen. Wenn eine benutzerdefinierte Eigenschaft mehrmals deklariert wird, überschreibt die niedrigste Definition in der CSS-Datei die darüber liegende Definition. 🎜🎜Das folgende Beispiel zeigt, wie einfach es ist, Eigenschaften von Benutzeraktionen dynamisch zu manipulieren und gleichzeitig den Code klar und prägnant zu halten. 🎜

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

🎜🎜🎜🎜🎜 Probieren Sie es aus: https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html🎜🎜🎜Beispiel 5 – Theme-Wechsel und CSS-Variablen🎜🎜CSS-Variablen Eins Einer der großen Vorteile ist ihre Reaktionsfähigkeit. Sobald wir sie aktualisieren, werden auch alle Eigenschaften mit CSS-Variablenwerten aktualisiert. Mit nur wenigen Zeilen Javascript und der geschickten Verwendung von CSS-Variablen können Sie also einen Theme-Switcher-Mechanismus erstellen. 🎜🎜🎜🎜🎜🎜Probieren Sie es selbst aus: https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js🎜

扩展

就像CSS中几乎所有东西一样，变量也非常简单易用。 以下是一些未包含在示例中的技巧，但在某些情况下仍然非常有用：

注意大写，CSS变量区分大小写

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

当我们使用var()函数时，还可以传入第二个参数。 如果找不到自定义属性，则将使用此值：

width: var(--custom-width, 33%);

可以将CSS变量直接用于HTML

<!--HTML-->
<html style="--size: 600px">

body {
  max-width: var(--size)
}

可以在其他CSS变量中使用CSS变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

可以通过媒体查询将CSS变量作为条件。 例如，以下代码根据屏幕大小更改 padding 的值：

:root {
    --padding: 15px 
}

@media screen and (min-width: 750px) {
    --padding: 30px
}

在calc()函数中也可以使用CSS变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 变量不是灵丹妙药。 它们不会解决我们在CSS领域中遇到的所有问题。 但是，它可以让我们的代码更具可读性和可维护性。

而且，它们极大地提高了跨大型文档进行更改的便利性。 只需将所有常量设置在一个单独的文件中，当我们只想对变量进行更改时，就不必跳过数千行代码。

原文地址：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

作者：Daniel

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonLassen Sie sich Schritt für Schritt durch 5 Beispiele führen, um sich mit CSS-Variablen vertraut zu machen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!