css变量
2022-04-28 本文已影响0人
正在输入______
一、变量的作用
在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。
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( <custom-property-name>, <declaration-value>)
意思就是，如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。举个例子：
.box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
}
则此时的背景色是#cd0000：
CSS变量不合法的缺省特性
请看下面这个例子：
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
请问，此时<body>的背景色是？
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;
}
请问，此时<body>的font-size大小是多少？
实际上，此处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);
}
此时，<body>的font-size大小才是20px，
例子1、2、3、4
