前言
大家都听说过变量，我们学习的任何语言都有变量的存在。
css中是否也存在变量呢？
也许很多小伙伴也是通过less,scss中来使用css变量
其实在css中也是有变量的，今天我们也来学习一下。
为什么要使用变量
变量有一个很大的作用就是降低维护成本。
不仅如此，还可以提高我们的开发效率。
实现改一个，而改全部。是不是爽歪歪。
使用变量的优势：
假如我们确定了项目的主题色，
然后在各个 CSS 代码中使用该了主题色，
如果后期主题色变了，那岂不是所有 CSS 代码都得更改一遍。
这样的话累死我们呀！
假如我们用变量将该主题色存储起来，
后续 CSS 代码中直接使用变量即可，
需要更改主题色时，直接更改变量值即可。
官网的介绍
自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 作者定义的，
它包含的值可以在整个文档中重复使用。
声明变量： --main-color: black;，
由 var() 函数来获取值比如：color: var(--main-color);
变量的使用
对上面代码的分析
上段代码中我们定义了一个 bgColor 变量，
需要注意的是我们需要在自定义属性前面加上--才算是变量，
这算是 CSS 变量的声明规则。
自定义属性值 rgb(9, 246, 246) 就是我们的变量值。
上面的:root 是一个伪类，它相当于一个全局作用域。
我们都知道变量是有作用域的概念的。
声明在:root 伪类中的变量可以在全局 CSS 代码中使用。
变量命名规则
不能包含 $,[,^,(,%等字符
普通字符局限在只要是 “数字[0-9]” “字母[a-zA-Z]” “下划线_” 和 “短横线-” 这些组合
可以是中文，日文或者韩文
无论是变量的定义和使用只能在声明块{}里面
变量值只能用作属性值，不能用作属性名，比如下方代码我们是不允许的：
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
5.换肤原理