我总结的 CSS 变量知识点

最近读到一篇文章《Everything you need to know about CSS Variables》，让我对 CSS 变量有了新的认识。下面将整理出来的跟自己感悟的地方与大家分享，希望能帮助到对 CSS 变量还一知半解的同学。
答疑
一、为什么 CSS 变量还称为“自定义属性（custom properties）”？
我们回忆 CSS 变量的使用方式：
span {
/* 局部变量 --color /
–color: gold;
color: var(–color);
}
复制代码声明 CSS 变量的时候，发现跟使用普通属性是一样的，这里说的“一样”是指：使用的位置一样，并且使用的方式也一样。
只不过跟普通属性相比，CSS 变量多了两个连字符 – 作为前缀，本质上就是个属性。而且这类属性都是开发者自己起的，属性值也是我们设置的，自然就是“自定义属性”了。
不过特殊的地方在于，我们可以使用 var() 函数解析出这类属性的属性值：
color: var(–color);
/ 相当于 /
color: gold;
复制代码还有一点，CSS 变量既然是属性，那么就可以像行内样式那样使用：
这段文本是金色的
复制代码文章后面“使用 JS 操作 CSS 变量”一节，就是基于此种写法实现的。之后会讲到，咱们先继续往下看。
二、全局变量和局部变量
全局变量是这样声明的：
:root {
–color: gray;
}
复制代码:root 伪类命中的是文档根元素 ，也就说
:root {