CSS3变量的使用方法

1.兼容性

1. FireFox > 49
2. Chrome > 49
3. Safari > 9.1
4. Opera > 41
5. IOS Safari >9.3

2.使用语法

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。变量名称不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。例如：

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

CSS变量使用完整语法
CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? )，例如：

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

3.变量的作用域

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

我的紫色继承于根元素
我的绿色来自直接设置

  ID选择器权重更高，因此阿拉是红色！
  
我也是红色，占了继承的光

变量作用域和DOM绑定，如果是全局变量采用:root { --color: purple; }形式来声明，所有的样式里面都可以使用。
div { --color: green; }局部使用，可以当作是局部变量覆盖全局变量，也可以当作是div的层级优先级更高。会覆盖掉全局的变量值。

4.CSS变量不合法的缺省特性

请看下面这个例子：

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}
// 请问，此时的背景色是？
A. transparent    B. 20px     C. #369      D. #cd0000

答案是A

解析：这是CSS变量非常有意思的一个点，对于CSS变量，只要语法是正确的，就算变量里面的值是个乱七八糟的东西，也是会作为正常的声明解析，如果发现变量值是不合法的，例如上面背景色显然不能是20px，则使用背景色的缺省值，也就是默认值代替。千万不能想当然得认为等同于background-color:20px，这也是为什么上面要强调CSS默认值的使用仅限于变量未定义的情况，并不包括变量不合法

5.CSS变量的空格尾随特性

body {
  --size: 20;   
  font-size: var(--size)px;
}
// 请问，此时的font-size大小是多少？
A. transparent    B. 20px     C. #369      D. #cd0000

如果你以为是20px就太天真了，实际上，此处font-size:var(--size)px等同于font-size:20 px，注意，20后面有个空格，所以，这里的font-size使用的是元素默认的大小。因此，就不要妄图取消就使用一个数值来贯穿全场，还是使用稳妥的做法：

body {
  --size: 20px;   
  font-size: var(--size);
}

或者使用CSS3 calc()计算：

body {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}

6.CSS变量的相互传递特性

就是说，我们在CSS变量定义的时候可以直接引入其他变量给自己使用，例如：

body {
  --green: #4CAF50;   
  --backgroundColor: var(--green);
}

CSS变量的值如果发生变化，引用这个变量的变量值也会发生变化，意思就是发生联动。这样就非常的方便。例如下面的例子，只需要修改一个--columns的值就可以达到响应式的目的。

.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}