CSS原生变量出来也好几个年头了，我们公司的项目也已经用了三年有余。
在原生变量出来之前，大家用的都是预处理器的变量。那么原生的变量的优势在哪里呢？
1.声明
声明变量的时候，变量名前面要加两根连词线 --，声明的命名不能包含$、[、^、(、%等字符，普通字符局限于[0~9]、[a~z]、[A~Z]、下划线_和短横线-这些组合，但是可以是中文，日文或者韩文。例如：
:root{
--color1: #ccc;
--宽度: 100px;
}
变量的值可以为各式各样的值，包括字符串。如：
--text: 'Today is sunday.'
2.使用
变量的使用要用到var()函数来读取。
例如：
:root{
--color1: #ccc;
--宽度: 100px;
--text1: 'Today is sunday.'
}
.test{
width: var(--宽度);
color: var(--color1);
&:before{
content: var(--text1);
}
}
线上效果：https://codepen.io/jianxiujiucan/pen/YzXXejL
如果变量值是数值，不能与数值单位直接连用，只能配合calc()函数使用。例如：
.test{
--num: 100;
width: var(--num)px; //无效
width: calc(var(--num) * 1px); // 有效，等同于100px
}
声明过的变量也可以被新变量引用，例如：
:root{
--color1: #ccc;
--color2: var(--color1);
}
3.作用域
CSS变量的作用域与 CSS 的"层叠"（cascade）规则一致，全局声明，也可以局部声明。声明的变量可以被重新定义，按优先级来显示。这一点是预处理器的变量所达不到的。例如：
:root {
--color1: #ccc;
--color2: var(--color1);
}
.test {
--color1: red;
}
.box .test {
--color1: green;
}
效果如下：
https://codepen.io/jianxiujiucan/pen/ZEGbOVa
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。例如：
color: var(--color3, #999); //如果--color3未定义，则使用颜色"#999"
4.原生变量与SASS的冲突
当原生变量的值定义为rgb()函数的值，在页面中调用它，那么Sass编译会报错。例如：
:root {
--color: 255,90,100;
}
p {
color: rgb(var(--color));
}
以上代码在原生的CSS里是没问题的，能正确读取到颜色值。
但是如果是在SCSS里，编译则会报错：
wrong number of arguments (1 for 3) for 'rgb'
因为SCSS自己封装了rgb函数，函数接收的值的格式必须是xxx,xxx,xxx，所以报错了。
但是，如果用rgba()函数，却又可以编译，例如：
:root {
--color: 255,90,100;
}
p {
color: rgba(var(--color), 1);
}
注：上述代码在codepen的sass模式下也无法生效，用vs code的插件live sass可以编译通过。
5.JS修改变量
sass的变量经过编译之后并不能对其进行修改，而css原生变量却可以通过js重新赋值，这一点绝对是大大的优势啊。例如：
document.body.style.setProperty('--color1, red'); // 设置变量
document.body.style.getPropertyValue('--color1').trim(); // 读取变量
document.body.style.removeProperty('--color1'); // 删除变量
网友评论