前面的话
一直以来，CSS中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。新的草案发布之后，直接在 CSS 中定义和使用变量不再是幻想了。本文将详细介绍CSS变量variable
CSS 变量，顾名思义，也就是由网页的作者或用户定义的实体，用来指定文档中的特定变量。
更准确的说法，应该称之为 CSS 自定义属性 ，不过下文为了好理解都称之为 CSS 变量。
一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。
但是新的草案发布之后，直接在 CSS 中定义和使用变量已经不再是幻想了，像下面这样，看个简单的例子：
// 声明一个变量：
:root{
--bgColor:#000;
}
这里我们借助了上篇文章 结构性伪类 中的 :root{ } 伪类，在全局 :root{ } 伪类中定义了一个 CSS 变量，取名为 --bgColor 。
定义完了之后则是使用，假设我要设置一个 div 的背景色为黑色：
.main{
background:var(--bgColor);
}
这里，我们在需要使用之前定义变量的地方，通过 var(定义的变量名) 来调用。
基本用法
CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问
兼容性：移动端和IE浏览器不兼容
【声明变量】
变量必须以 -- 开头。例如--example-variable: 20px，意思是将20px赋值给--example-varibale变量
可以将声明变量的语句置于任何元素内，如果要设置全局变量，则可以设置为:root、body或html
:root{
--bgColor:#000;
}
查看更多关于全新知识：CSS变量-variable的详细内容...