小tips:了解CSS/CSS3原生变量var

一、变量是个好东西

在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。

Chrome/Firefox/Safari浏览器都是绿油油的，兼容性大大超出我的预期，于是果断尝鲜记录下语法用法和特性。

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

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

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

结果背景色如下：

但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[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);
 }
      p>
    我的紫色继承于根元素/p>
     div>
    我的绿色来自直接设置/div>
     div id='alert'>
       ID选择器权重更高，因此阿拉是红色！   p>
    我也是红色，占了继承的光/p>
     /div>
     

上面这个例子我们可以获得这些信息：

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

CSS属性名可以走变量吗？

类似下面这样：

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

答案是“不可以”，要是可以支持的话，那CSS的压缩可就要逆天了，估计所有的属性都会变成1~2个字符。

CSS变量支持同时多个声明吗？

类似下面这样：
…
不好意思，类似不了，语法上就根本不支持。

CSS变量使用完整语法
CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( [,

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！