{% note primary %}
学过 SASS(LESS)等 CSS 预编译工具我们知道它们可以使用变量，但是 CSS 中也可以使用变量，它有很强的实用性。
{% endnote %}
#语法
声明变量时需要加在变量名前面加上--，在使用变量时使用var(--name)。
#用法
局部
element {
--main-color: #000;
}
element {
color: var(--main-color);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
全局
:root {
--main-bg-color: #fff;
}
.content {
background-color: var(--main-bg-color);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
#结合 js 使用
当我们需要有各种主题时我们需要修改 CSS 变量来达到效果，而修改 CSS 变量需要结合 JS 来使用。
let root = document.querySelector(":root");
element.addEventListener("click", event => {
root.style.setProperty("--theme-color", event.target.style.background);
});
1
2
3
4
2
3
4