CSS3 变量var()是什么？怎么使用
CSS 变量（又名自定义属性）已在 WEB 浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解。
对于一个大型项目，不同的 CSS 文件，如果哪天被要求更改颜色。我们可以做的最好快的方式就是“查找并替换”。
使用 CSS 变量，可以更快的解决这个问题。定义变量名需要用 -- 开头 。首先，我们现在将在 :root 或元素中定义变量。
命名变量
与编程语言命名变量相似，CSS 变量的有效命名应包含字母数字字符，下划线和破折号。另外，值得一提的是 CSS 变量区分大小写。
/* 合法命名 */
:root {
--primary-color: #222;
--_primary-color: #222;
--12-primary-color: #222;
--primay-color-12: #222;
}
/* 非法命名 */
:root {
--primary color: #222; /* Spacings are not allowed */
--primary$%#%$#
}
作用域
CSS 变量也有自己的作用域，这个概念类似于其他编程语言。以 JS 为例：
:root {
--primary-color: #235ad1;
}
.section-title {
--primary-color: d12374;
color: var(--primary-color);
}
变量 --primary-color 是全局变量，可以从文档中的任何地方访问。变量 --primary-color 由于是在 .section-title 定义的，所以只能在 .section-title 中访问。