随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。 变量的好处就是可以降低维护成本，附带还有更高性能。
css变量使用语法
CSS中原生的变量定义语法是：--，变量使用语法是：var(--)，其中*表示我们的变量名称。
关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有，还可以是中文，但是不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合。
:root {
--666: #666;
}
body {
background-color: var(--666);
}
或者这样，有了中文还怕啥！
:root {
--灰色: #666;
}
body {
background-color: var(--灰色);
}
无论是变量的定义和使用只能在声明块{}里面，例如，下面这样是无效的：
--灰色: #666;
body {
background-color: var(--灰色);
}
:root{
background-color: var(--灰色);/*:root代表根元素html,所以在这里面定义的变量属于全局变量。*/
}
div {
--background-color: #333;/*此时定义的变量只适用于div元素下，属于局部变量*/
background-color: var(--background-color);
}
变量的属性使用也是有权重的，其实可以把CSS的原生变量理解为一种CSS属性。这样，你就对其权重和变量应用规则要容易理解地多。使用起来也就更加方便了，来看一个例子。
<style>
:root {
--color: purple;
}
div {
--color: green;
}
#alert {
--color: red;
}
* {
color: var(--color);
}
</style>
`body`
<p>我的紫色继承于根元素</p>
<div>我的绿色来自直接设置</div>
<div id='alert'>
ID选择器权重更高，因此我是红色！
<p>我也是红色，占了继承的光</p>
</div>
</body>
变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；
当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法，因为没有必要，!important设计初衷是干掉JS的style设置，但对于变量的定义则没有这样的需求。
注意 CSS属性名不可以走变量、CSS变量不支持同时多个声明
CSS变量使用完整语法
CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? )，
意思就是，如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。举个例子：
.box {
--background-color: #666;
}
body {
background-color: var(--background-color, #f60);
}
则此时的背景色是#f60
CSS变量不合法的缺省特性
请看下面这个例子：
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
请问，此时 body 的背景色是？
A. transparent B. 20px C. #369 D. #cd0000
答案是…………………………A. transparent
这是CSS变量非常有意思的一个点，对于CSS变量，只要语法是正确的，就算变量里面的值是个乱七八糟的东西，也是会作为正常的声明解析，如果发现变量值是不合法的，例如上面背景色显然不能是20px，则使用背景色的缺省值，也就是默认值代替，于是，上面CSS等同于：
body {
--color: 20px;
background-color: #369;
background-color: transparent;
}
千万不能想当然得认为等同于background-color:20px，这也是为什么上面要强调CSS默认值的使用仅限于变量未定义的情况，并不包括变量不合法。
CSS变量的空格尾随特性
请看下面这个例子：
body {
--size: 20;
font-size: var(--size)px;
}
如果你以为body的font-size是20px就太天真了，实际上，此处font-size:var(--size)px等同于font-size:20 px，注意，20后面有个空格，所以，这里的font-size使用的是body元素默认的大小。因此，就不要妄图取消就使用一个数值来贯穿全场，还是使用稳妥的做法：
body {
--size: 20px;
font-size: var(--size);
}
或者使用CSS3 calc()计算：下一章在介绍CSS calc()
body {
--size: 20;
font-size: calc(var(--size) * 1px);
}
此时，body的font-size大小才是20px，
CSS变量的相互传递特性
就是说，我们在CSS变量定义的时候可以直接引入其他变量给自己使用，例如：
body {
--green: #4CAF50;
--backgroundColor: var(--green);
}
CSS变量兼容性
ie全家都被pass了，感觉很不好。
如有错误之处，欢迎指正。