CSS variable 变量

声明变量的时候，变量名前面要加两根连词线 --，声明的命名不能包含$、[、^、(、%等字符，普通字符局限于[0~9]、[a~z]、[A~Z]、下划线_和短横线-这些组合，但是可以是中文，日文或者韩文。例如：

变量的值可以为各式各样的值，包括字符串。如：

变量的使用要用到var()函数来读取。

例如：

线上效果：codepen.io/jianxiujiuc…

如果变量值是数值，不能与数值单位直接连用，只能配合 calc() 函数使用。例如：

声明过的变量也可以被新变量引用，例如：

CSS变量的作用域与 CSS 的"层叠"（cascade）规则一致，全局声明，也可以局部声明。声明的变量可以被重新定义，按优先级来显示。这一点是预处理器的变量所达不到的。例如：

效果如下：codepen.io/jianxiujiuc…

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。例如：

当原生变量的值定义为rgb()函数的值，在页面中调用它，那么Sass编译会报错。例如：

以上代码在原生的CSS里是没问题的，能正确读取到颜色值。但是如果是在SCSS里，编译则会报错：wrong number of arguments (1 for 3) for 'rgb'因为SCSS自己封装了rgb函数，函数接收的值的格式必须是 xxx,xxx,xxx ，SASS会认为这里传进来的参数格式不对，所以报错了。

但是，如果用 rgba() 函数，却又可以编译，例如：

注：上述代码在codepen的sass模式下也无法生效，用vs code的插件live sass可以编译通过。

sass的变量经过编译之后用js是没有办法修改的，而css原生变量却可以通过js重新赋值，这一点绝对是大大的优势啊。例如：