CSS 变量指的是var() 函数用于插入 CSS 变量的值。
CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。
使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色。
传统方式的代码显示了在样式表中定义一些颜色的传统方式(通过为每个特定元素定义要使用的颜色):
var() 如何工作
首先:CSS 变量可以有全局或局部作用域。
全局变量可以在整个文档中进行访问/使用,而局部变量只能在声明它的选择器内部使用。
如需创建具有全局作用域的变量,请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。
如需创建具有局部作用域的变量,请在将要使用它的选择器中声明它。
下面的例子与上面的例子相同,但是在这里我们使用 var() 函数。
首先,我们声明两个全局变量(--blue 和 --white)。然后,我们使用 var() 函数稍后在样式表中插入变量的值:
使用 var() 有如下优势:
- 使代码更易于阅读(更容易理解)
- 使修改颜色值更加容易