两分钟带你了解 CSS 变量（附交互式演示）

CSS变量已经存在很长时间了，但它们仍然非常有用。

它们可以在如下所示的元素中定义：

element {
    --my-variable: #555;
}

变量的值可以是任何东西，从像素值到颜色再到线性渐变。

通过将变量封装在var函数中，几乎可以在任何地方使用它：

another-element {
    color: var(--my-variable);
}

为什么不使用变量预处理器呢？

这是一个非常常见的问题，因为预处理器似乎在原生 CSS 变量出现之前就已经解决了 CSS 变量问题！

然而，CSS 变量可以实时更改且不会被编译，这意味着可以在 JavaScript 中更改 CSS 变量的值，并且所有对该变量的引用都会自动更改。接下来的示例很好地利用了这一特性，并充分发挥了 CSS 变量的优势。

CSS变量的实际应用演示

CSS 变量的一个用途是能够使用一个单独的变量来设置网站的主要颜色，然后允许用户根据需要交互式地更改该主要颜色。

这里有一个有趣的 CodePen 小示例，正好展示了这一点！

在这里，我使用一些基本的 JavaScript 代码来更改 CSS 变量，从而更改整个页面的主题颜色。

CSS变量的其他用例

以上示例只是 CSS 变量众多应用场景之一。其他可能的用途包括：

• 为元素的默认字体大小创建一个 CSS 变量，并动态地为残障用户更改该变量。
• 创建用于表示元素高度和宽度的 CSS 变量，并在 CSS 动画中动态更改该变量。
• 为网站上的每种颜色创建 CSS 变量，并动态更改这些变量以创建“深色模式”或其他主题。

浏览器支持及结论

除了 IE、QQ 和百度浏览器之外，所有主流浏览器都支持 CSS 变量：CanIUse Data for CSS Variables。

希望您喜欢这篇关于 CSS 变量的讲解和演示，并发现它们对您的网站有所帮助。我个人在几个网站上都使用 CSS 变量来设置颜色和字体大小，发现它们能让我的样式更加简洁、易读和易于重构。

感谢您的浏览。

——加布里埃尔·罗穆阿尔多，2020 年 1 月 27 日