概述
CSS 支持自定义属性设置变量，通过 val()来访问。
解决什么问题
当 项目变得庞大时， 许多 CSS 信息会大量的重复出现。这种情况可以使用像 SASS 这样的预处理器。CSS 变量为我们带来一些预处理器的便利，并且不需要额外的编译。
详细文档
使用
局部变量
live demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .container {
--main-color: #abcabc;
background: var(--main-color);
padding: 20px;
font-size: 25px;
text-align: center;
margin: 0 auto;
width: 300px;
button {
background: var(--main-color);
}
}
|
全局变量
live demo
1
2
3
4
5
6
7
| <div class="container1 container">
<p>Hello World</p>
<button>button</button>
</div>
<div class="container2 container">
<p>Hello World again</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| :root {
--global-color: #666;
--global-bg-color: #789789;
}
.container {
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
.container1 {
--global-color: #defdef;
color: var(--global-color);
background: var(--global-bg-color);
button {
color: var(--undefined-variable);
}
}
.container2 {
margin-top: 20px;
color: var(--global-color);
}
|
作用域
从跟上边的例子可以看到，我们设置了根作用域，在 container1 里也设置了相同的变量名称 --global-color。此时里层的变量起作用。并且，我们从 container2 看到，在内层命名的 --global-color 并没有改写外层的 --global-color 值。
CSS 变量的作用域类似 JS 的作用域，内层的作用域优先，如果找不到变量则向外查找。如果都找不到的话，则设置属性为 inherit（自己的理解，不一定对）。