css3 变量

一、支持范围

二、CSS变量var()语法和用法和特性

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。
关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有,
例如：

   
   :root {
     --1: #369;
   }
   body {
     background-color: var(--1);
   }

另外值得注意的是 CSS 变量并不支持 !important 声明。但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文，例如：

      
        body {
           --深蓝: #369;
           background-color: var(--深蓝);
        }

所以，我们就可以直接使用中文名称作为变量，即使英语4级没过的小伙伴也不会有压力了，我们也不需要随时挂个翻译器在身边了。
无论是变量的定义和使用只能在声明块{}里面，例如，下面这样是无效的：
--深蓝: #369;

         
           body {
                 background-color: var(--深蓝);
               }

变量的定义，或者说声明跟CSS计数器的声明类似的，你应该摆脱Sass/Less等预编译工具语法先入为主的语法影响，把CSS的原生变量理解为一种CSS属性。
这样，你就对其权重和变量应用规则要容易理解地多。
例如下面这个例子：

            
              :root { --color: purple; }
                  div { --color: green; }
                  #alert { --color: red; }
                  * { color: var(--color); }


                  我的紫色继承于根元素
                      我的绿色来自直接设置
                      
                        ID选择器权重更高，因此阿拉是红色！
                        我也是红色，占了继承的光

上面这个例子我们可以获得这些信息：
1. 变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；
2. 当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法，因为没有必要，!important设计初衷是干掉JS的style设置，但对于变量的定义则没有这样的需求。
如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值

           
             .box {
                   --1: #369;
                 }
                 body {
                   background-color: var(--1, #cd0000);
                 }