CSS 变量 - var() 函数
CSS 变量
var() 函数用于插入 CSS 变量的值。
CSS 变量可以访问 DOM，这意味着你可以创建具有全局或局部作用域的变量，使用 JavaScript 更改变量，以及根据媒体查询更改变量。
使用 CSS 变量的一个好方法是处理设计中的颜色。与其一遍又一遍地复制粘贴相同的颜色，不如将它们放在变量中。
传统方法
以下示例显示了在样式表中定义某些颜色的传统方法（通过为每个特定元素定义要使用的颜色）
示例
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}
自己动手试一试 »
var() 函数的语法
var() 函数用于插入 CSS 变量的值。
var() 函数的语法如下：
var(--name, value)
| 值 | 描述 |
|---|---|
| name | 必需。变量名（必须以两个连字符开头） |
| value | 可选。回退值（如果在找不到变量时使用） |
注意：变量名必须以两个连字符（--）开头，并且区分大小写！
var() 的工作原理
首先：CSS 变量可以具有全局或局部作用域。
全局变量可以在整个文档中访问/使用，而局部变量只能在声明它的选择器内部使用。
要创建具有全局作用域的变量，请在 :root 选择器内声明它。:root 选择器匹配文档的根元素。
要创建具有局部作用域的变量，请在将使用它的选择器内声明它。
以下示例与上面的示例相同，但这里我们使用了 var() 函数。
首先，我们声明两个全局变量（--blue 和 --white）。然后，我们在样式表稍后使用 var() 函数来插入变量的值。
示例
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
自己动手试一试 »
使用 var() 的优点包括：
- 代码更易读（更易于理解）
- 更改颜色值要容易得多
要将蓝色和白色更改为柔和的蓝色和白色，只需更改两个变量值即可。
示例
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
自己动手试一试 »
浏览器支持
表中的数字表示完全支持 var() 函数的第一个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函数
| 属性 | 描述 |
|---|---|
| var() | 插入 CSS 变量的值 |
