1.兼容性
- FireFox > 49
- Chrome > 49
- Safari > 9.1
- Opera > 41
- 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); }
<p>我的紫色继承于根元素</p>
<div>我的绿色来自直接设置</div>
<div id='alert'>
ID选择器权重更高，因此阿拉是红色！
<p>我也是红色，占了继承的光</p>
</div>
变量作用域和DOM绑定，如果是全局变量采用
:root { --color: purple; }形式来声明，所有的样式里面都可以使用。
div { --color: green; }局部使用，可以当作是局部变量覆盖全局变量，也可以当作是div的层级优先级更高。会覆盖掉全局的变量值。
4.CSS变量不合法的缺省特性
请看下面这个例子：
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
// 请问，此时<body>的背景色是？
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;
}
// 请问，此时<body>的font-size大小是多少？
A. transparent B. 20px C. #369 D. #cd0000
如果你以为是20px就太天真了，实际上，此处font-size:var(--size)px等同于font-size:20 px，注意，20后面有个空格，所以，这里的font-size使用的是<body>元素默认的大小。因此，就不要妄图取消就使用一个数值来贯穿全场，还是使用稳妥的做法：
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;
}
}
网友评论