变量的声明
声明变量的时候，变量名前面要加两根连词线（--），看下图：
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
也就是说，把颜色#7F583F用变量--foo来代替。
有效范围是body选择器范围。
各种值都可以用CSS变量来代替。
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
}
变量名大小写敏感，--header-color和--Header-Color是两个不同变量。
var() 函数
var()函数用于读取变量。
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
color: var(--foo, #7F583F);
作用域
body {
--foo: #7F583F;
}
.content {
--bar: #F7EFD2;
}
上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围。
由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。
http://www.ruanyifeng.com/blog/2017/05/css-variables.html