1. 声明
声明变量的时候，变量名前面要加两根连词线 --，声明的命名不能包含$、[、^、(、%等字符，普通字符局限于[0~9]、[a~z]、[A~Z]、下划线_和短横线-这些组合，但是可以是中文，日文或者韩文。例如：
:root{
--color1: #ccc;
--宽度: 100px;
}
变量的值可以为各式各样的值，包括字符串。如：
:root{
--text: 'Today is sunday.'
}
p:before{
content: var(--text);
}
2. 使用
变量的使用要用到var()函数来读取。
例如：
:root{
--color1: #ccc;
--宽度: 100px;
--text1: 'Today is sunday.'
}
.test{
width: var(--宽度);
color: var(--color1);
&:before{
content: var(--text1);
}
}
如果变量值是数值，不能与数值单位直接连用，只能配合 calc() 函数使用。例如：
.test{
--num: 100;
width: var(--num)px; //无效
width: calc(var(--num) * 1px); // 有效，等同于100px
}
声明过的变量也可以被新变量引用，例如：
:root{
--color1: #ccc;
--color2: var(--color1);
}
3. 作用域
CSS变量的作用域与 CSS 的"层叠"（cascade）规则一致，全局声明，也可以局部声明。声明的变量可以被重新定义，按优先级来显示。这一点是预处理器的变量（就是SASS、LESS啥的）所达不到的。例如：
:root {
--color1: gray; // 定义是灰色
}
.test {
--color1: red; //重置为红色
}
.box .test {
--color1: green; // 再重置为绿色
}
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。例如：
color: var(--color3, #999); //如果--color3未定义，则使用颜色"#999"
4. 原生变量与SASS的冲突
当原生变量的值定义为rgb()函数的值，在页面中调用它，那么Sass编译会报错。例如：
:root {
--color: 255,90,100;
}
p {
color: rgb(var(--color));
}
以上代码在原生的CSS里是没问题的，能正确读取到颜色值。
但是如果是在SCSS里，编译则会报错：
wrong number of arguments (1 for 3) for 'rgb'。
因为SCSS自己封装了rgb函数，它会将rgb色值转成十六进制输出，所以函数接收的值的格式必须是 rgb(参数一 ,参数二, 参数三) 。如果传的值是一个CSS原生变量，SASS会认为这里传进来的参数格式不对，所以报错了。
但是，如果用 rgba() 函数，SASS却又可以顺利编译，例如：
:root {
--color: 255,90,100;
}
p {
color: rgba(var(--color), 1);
}
注：上述代码在codepen的sass模式下也无法生效，用vs code的相关插件可以编译通过。
rgb(var(--color), var(--color), var(--color))可以编译成功）。*
5. JS修改变量
sass的变量经过编译之后用js是没有办法修改的，而css原生变量却可以通过js重新赋值，这一点绝对是大大的优势啊。例如：
document.body.style.setProperty('--color1, red'); // 设置变量
document.body.style.getPropertyValue('--color1').trim(); // 读取变量
document.body.style.removeProperty('--color1'); // 删除变量
