CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。（此句转）
变量虽好用，但是兼容是在不怎么样：点这里查看。
一、变量的声明
:root {
--base-font-size: 16px;
--link-color: #6495ed;
--base-color: #fff;
}
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
上面代码在根元素和body上声明了变量，声明变量的时候，变量名前面要加两根连词线（--）。
变量名大小写敏感，--header-color和--Header-Color是两个不同变量。
二、var() 函数
var()函数用于读取变量。
#box{
background: var( --link-color );
color: var( --base-color );
}
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
color: var(--base-color, #7F583F);
var()函数还可以用在变量的声明。
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
三、变量值的类型
如果变量值是一个字符串，可以与其他字符串拼接。
--bar: 'hello';
--foo: var(--bar)' world';
如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
四、兼容性处理
a {
color: #7F583F;
color: var(--primary);
}
五、JavaScript 操作
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
参考：
