CSS 变量 - var() 函数
CSS 变量
这 var() 函数用于插入 CSS 变量的值。
CSS 变量可以访问 DOM，这意味着您可以创建具有本地或全局范围的变量、使用 JavaScript 更改变量以及根据媒体查询更改变量。
使用 CSS 变量的一个好方法是设计颜色。您可以将颜色放入变量中，而不必一遍又一遍地复制和粘贴相同的颜色。
传统方式
下面的例子展示了在样式表中定义某些颜色的传统方式（通过为每个特定元素定义要使用的颜色）：
例子
主体 { 背景颜色：#1e90ff; }
h2 { 底部边框：2px 实线 #1e90ff; }
。容器 {
颜色：#1e90ff；
背景颜色：#ffffff；
填充：15px；
}
按钮 {
背景颜色：#ffffff；
颜色：#1e90ff；
边框：1px 实线#1e90ff；
填充：5px；
}
亲自尝试 »
var() 函数的语法
这 var() 函数用于插入 CSS 变量的值。
语法 var() 函数如下：
变量（--名称，值)
| 价值 | 描述 |
|---|---|
| 姓名 | 必填。变量名称（必须以两个破折号开头） |
| 价值 | 可选。后备值（如果未找到变量则使用） |
笔记： 变量名必须以两个破折号（--）开头，并且区分大小写！
var() 的工作原理
首先：CSS 变量可以具有全局或局部范围。
全局变量可以通过整个文档访问/使用，而局部变量只能在声明它的选择器内使用。
要创建具有全局范围的变量，请在 :root 选择器。:root 选择器与文档的根元素匹配。
要创建具有局部范围的变量，请在将要使用它的选择器内声明它。
下面的例子与上面的例子相同，但是这里我们使用 var() 功能。
首先，我们声明两个全局变量（--blue 和 --white）。然后，我们使用 var() 函数稍后在样式表中插入变量的值：
例子
：根 {
--蓝色：#1e90ff；
--白色：#ffffff；
}
主体 { 背景颜色： var(--blue); }
h2 { 底部边框：2px 实线 var(--blue); }
。容器 {
颜色：var（--蓝色）；
背景颜色：var（--white）；
填充：15px；
}
按钮 {
背景颜色：var（--white）；
颜色：var（--蓝色）；
边框：1px 实线 var(--blue)；
填充：5px；
}
亲自尝试 »
使用 var() 的优点是：
- 使代码更容易阅读（更容易理解）
- 使更改颜色值变得更加容易
要将蓝白色改为更柔和的蓝白色，只需更改两个变量值：
例子
：根 {
--蓝色：#6495ed；
--白色：#faf0e6；
}
主体 { 背景颜色： var(--blue); }
h2 { 底部边框：2px 实线 var(--blue); }
。容器 {
颜色：var（--蓝色）；
背景颜色：var（--white）；
填充：15px；
}
按钮 {
背景颜色：var（--white）；
颜色：var（--蓝色）；
边框：1px 实线 var(--blue)；
填充：5px；
}
亲自尝试 »
浏览器支持
表中的数字表示第一个完全支持 var() 功能。
| 功能 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函数
| 财产 | 描述 |
|---|---|
| var() | 插入 CSS 变量的值 |
