css变量

一、变量的作用

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

css变量浏览器兼容

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

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。在CSS变量中，命名可以以数字开头，例如：

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

但是，不能包含$，[，^，(，%等特殊字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文，例如：

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

所以，我们就可以直接使用中文名称作为变量.

无论是变量的定义和使用只能在声明块{}里面，例如，下面这样是无效的：

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

变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。

例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；

CSS变量使用的完整语法为：var( , )

意思就是，如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。举个例子：

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

则此时的背景色是#cd0000：

CSS变量不合法的缺省特性

请看下面这个例子：

body {
    --color: 20px;
    background-color: #369;
    background-color: var(--color, #cd0000);
}

请问，此时的背景色是？

A. transparent B. 20px C. #369 D. #cd0000

---

---

---

答案是 A. transparent

对于CSS变量，只要语法是正确的，就算变量里面的值是个乱七八糟的东西，也是会作为正常的声明解析，如果发现变量值是不合法的，例如上面背景色显然不能是20px，则使用默认值代替，于是，上面CSS等同于：

body {
    --color: 20px;
    background-color: #369;
    background-color: transparent;
}

CSS变量的空格尾随特性

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

请问，此时的font-size大小是多少？

实际上，此处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);
}

此时，的font-size大小才是20px，

例子1、2、3、4