CSS 变量，又称为 CSS 自定义属性，是前端开发中比较新颖的知识点；但是由于很多前端开发人员专注于使用 UI 框架，CSS 反倒变成一个小众知识点了。本文就借次机会复习一下这个知识。
Overview
变量对开发的意义不言而喻：减少重复，增加可读性，并保留未来统一修改属性的便捷性。
header {
color: #ff6f69;
}
footer {
color: #ff6f69;
}
举个?，常规的 CSS 开发中，申明不同字体颜色，往往是通过硬编码 color 属性来实习。但发现没？上述代码中，header和footer用了同一种颜色，出于防重、可读性、敏捷性等一系列软件开发中的实际考量，我们很自然地会想到使用变量：
:root {
--red: #ff6f69;
}
header {
color: var(--red);
}
footer {
color: var(--red);
}
申明
CSS 变量以两个减号开头（--），并在特定选择器下定义具体的数值。下面代码中，我们给所有 div 元素定义了两个变量：--pink和--green。
div {
--pink: #f7f;
--green: #7f7;
}
CSS 还提供了一个放置全局变量的地方——:root，它的作用域就是所有 html 下的 DOM 元素。
:root {
--bg-color: rgb(255,255,255);
--content-padding: 1rem;
}
var()
调用变量就得用到 var 函数了，如下所示直接在 value 位置调用已定义的变量即可：
:root {
--red: #ff6f69;
}
p {
color: var(--red);
border: 1px solid var(--red);
}
事实上，var 函数有两个入参：第一个参数就是 CSS 变量，而第二个参数是该变量的默认值——防止变量不存在：
p {
border: 1px solid var(--red, #ff6f69);
}
我们还可以在申明变量时调用其他变量：
:root {
--red: #ff6f69;
--bg-color: var(--red);
}
甚至可以做一些简单的字符串拼接和数值计算：
:root {
--hello: 'hello';
--content: var(--hello)' world';
--size: 20;
--margin-top: calc(var(--size) * 1px);
}
注意：var 只能作用于 value，不能作用于 key。以下是不合法的：
.invalid {
--margin: 'margin';
var(--margin): 1rem; /* invalid */
}
局部变量
上面提到了全局变量，我们也可以声明局部变量（local variable）。所谓局部变量就是定义在 tag、class、id 等一系列选择器里的属性，这些局部变量服务于那些匹配特定选择器的元素。
举个?，我们为对话框定义一种特定的颜色变量——--dialog-color；如下所示，在类选择器 .dialog 里声明该变量的数值：
.dialog {
--dialog-color: green;
}
接着对话框相关的后代选择器就能访问到该变量了：
.dialog span {
color: var(--dialog-color);
border: 1px solid var(--dialog-color);
}
而那些与 .dialog 无关的选择器试图调用该变量时，则不会产生效果：
.alert {
color: var(--dialog-color); /* invalid */
}
Cascade & Inheritance
可能会有个疑问，同名的局部变量冲突了该如何抉择？
:root {
--color: blue;
}
p {
--color: green;
}
.alert {
--color: red;
}
* {
color: var(--color);
}
Cascade 规则
CSS 解决冲突的方式一般就是 cascade （层叠）规则——优先级高的特征胜出。下方 html 中，三行元素的字体颜色应用的是同一个选择器——* { color: var(--color); }，但最终的渲染却大相径庭。
blue
green
red
cascade rule
原因是他们分别选用了不同的变量：
第一行的
选择了全局变量——blue
第二行的应用的是该标签选择器里的局部变量——green
第三行虽然也是
标签，但是类选择器的优先级高于标签，所以类（.alert）的变量胜出——red
Inheritance 规则
某些情景下，可能会出现一些违反 cascade 规则的情况，比如下方的标签；它的字体应用的也是这条规则——* { color: var(--color); }，表面上它会适配:root里的全局变量——blue，但最终文字被渲染成了绿色。。。
inheritance rule
原因是还有一个叫inheritance（继承）的规则，通俗来说就是子元素的某些属性会被设置成父节点的值。这里标签的父节点是
标签，所以它的变量就会等于p的值了——green。
动态变量
在 CSS 变量出现前，less、sass 这类预编译语言已经开始使用变量了。但是 CSS 的变量又有些许不同：它是可以被 DOM 访问的，而后者只是一个编译阶段的中间变量，最终效果仅仅是文本替换——等同于 hard code。通俗点说，CSS 变量是 DOM 对象里的一个键值对（可以被更改），而 less 或 sass 的变量在 DOM 中并不会存在。
Responsiveness
在实践中，我们可以根据 CSS 这个特性，动态适配特定的变量，比如我们可以在响应式编程里使用该策略：
:root {
--main-font-size: 16px;
}
media all and (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}
当屏幕变小时，--main-font-size 的值会做响应式的变化，而那些引用了该变量的 CSS 选择器也会随之更改，这一点是那些预编译语言所不能企及的。
Javascript
另外，DOM 可以访问 CSS 变量就意味着我们还可以通过 JS 操作 CSS 变量。这样就可以实现修改一处变量，全局样式随之更改的效果了：
const rootStyle = document.querySelector(":root").style;
rootStyle.getPropertyValue('--color');
rootStyle.setProperty('--color', 'green');
rootStyle.removeProperty('--color');
小结
CSS 变量已得到主流浏览器的支持（IE 除外），是我们前端“武器库”里的常备工具了。相比于传统的样式表申明，CSS 变量让代码变得更加的简洁、灵活。除此之外，它是 DOM 元素的一个属性，我们也可以通过该特性实现 JS 和 CSS 的通信，是一个相对比较高级的开发技巧。
相关
文章同步发布于an-Onion 的 Github。码字不易，欢迎点赞。
本文章由javascript技术分享原创和收集
发表评论 (审核通过后显示评论)：