1。声明变量时，必须在变量名前加两个连字符---。声明的名称不能包含$、[、^、(、%等字符，普通字符仅限于[0~9]、[a~z]、[A~Z]、下划线_和破折号——这些组合，但可以是中文、日文或韩文。例如：:root{--color1:#ccc;--width:100px;}变量的值可以是各种值，包括字符串。例如：:root{--text:'今天是星期天'}p:before{content:var(--text);}2.变量的使用需要使用var()函数读取例如：root{--color1:#ccc;--width:100px;--text1:'今天是星期天'}.test{width:var(--width);color:var(--color1);&:before{content:var(--text1);}}在线效果：https://codepen.io/jianxiujiucan/pen/YzXXejLifvariablevalue是数值，不能直接和数值单位一起使用，只能和calc一起使用()函数。例如：.test{--num:100;width:var(--num)px;//无效宽度:calc(var(--num)*1px);//有效，相当于100px}声明的变量c也可以被新变量引用，例如：root{--color1:#ccc;--color2:var(--color1);}3。作用域CSS变量的作用域与CSS的“级联”规则一致。全局声明也可以在本地声明。声明的变量可以根据优先级重新定义和显示。这是无法到??达预处理器变量。例如：:root{--color1:#ccc;--color2:var(--color1);}.test{--color1:red;}.box.test{--color1:green;}效果如下：https://codepen.io/jianxiujiucan/pen/ZEGbOVavar()函数也可以使用第二个参数来表示变量的默认值。如果该变量不存在，将使用此默认值。例如：颜色：var(--color3,#999);//如果没有定义--color3，则使用颜色"#999"4.原生变量与SASS冲突当原生变量的值定义为rgb()函数的值时，在页面中调用，则sass编译会报错。例如：:root{--color:255,90,100;}p{color:rgb(var(--color));}以上代码在原生CSS中没有问题，可以正确读取颜色值。但是如果是在SCSS中，编译会报错：wrongnumberofarguments(1for3)for'rgb'因为SCSS本身封装了rgb函数，函数接收的值的格式必须是xxx,xxx,xxx，所以报错。但是，如果使用rgba()函数，则可以编译，例如：root{--color:255,90,100;}p{color:rgba(var(--color),1);}注意：以上代码在codepen的sass模式下不生效，但是可以用vscode的livesass插件编译。5.JS修改变量。sass变量编译后不能用js修改，但是css原生变量可以通过js重新赋值。这绝对是一个很大的优势。例如：document.body.style.setProperty('--color1,red');//设置变量document.body.style.getPropertyValue('--color1').trim();//读取变量document.body.style.removeProperty('--color1');//删除变量6.例：css变量实现换肤功能https://jianxiujiucan.github.io/demo/skin.html
