变量声明及使用1.声明：--variable-name:variable-value;声明变量时，应在变量名前加两个连字符（--）。变量名区分大小写，--header-color和--Header-Color是两个不同的变量。:root{--color:red;}2.使用：使用var(变量名)来使用一个变量#div{color:var(color)}var()函数也可以使用第二个参数，表示默认值的变量值。如果该变量不存在，将使用此默认值。颜色：var(--foo,#7F583F);第二个参数不处理内部逗号或空格，它们被视为参数的一部分。var(--font-stack,"Roboto","Helvetica");var(--pad,10px15px20px);可以与普通属性混合使用：root{--main-color:#c06;--accent-background:linear-gradient(totop,var(--main-color),white);}3.变量的组合可以组合使用：当变量的值为字符串时，可以直接拼接，如下：root{--screen-category:'category'//变量值为字符串}body:after{content:'--screen-category:'var(--screen-category);//直接拼接}当变量的值为数值时，必须使用calc()函数进行计算，即使是简单的单位splicing.foo{--gap:20;/*无效*/margin-top:var(--gap)px;}.foo{--gap:20;margin-top:calc(var(--gap)*1px);}如果变量值有单位，则不能写成字符串。/*无效*/.foo{--foo:'20px';font-size:var(--foo);}/*有效*/.foo{--foo:20px;font-size:var(--foo);}4.var()函数也可以用在变量声明中：root{--primary-color:red;--logo-text:var(--primary-color);}注意，变量值只能作为属性值使用，不能作为属性名。.foo{--side:margin-top;/*invalid*/var(--side):20px;}在上面的代码中，变量--side被用作属性名，这是无效的。二、继承和作用域1、作用域使用：root{}定义全局变量如果希望变量在局部可用，在特定的选择器下定义：root{color:red;//全球可用}.box{--1:#369;//仅在.box范围内可用}body{background-color:var(--1,#cd0000);}3.兼容性处理对于不支持CSS变量的浏览器，可以采用如下写法。一个{颜色：#7F583F；color:var(--primary);}也可以使用@support命令检测。@supports((--a:0)){/*支持*/}@supports(not(--a:0)){/*不支持*/}四、js操作css变量JavaScript也可以检测浏览器是否支持CSS变量。constisSupported=window.CSS&&window.CSS.supports&&window.CSS.supports('--a',0);if(isSupported){/*支持*/}else{/*不支持*/}JavaScript操作如何编写CSS变量。//设置变量document.body.style.setProperty('--primary','#7F583F');//读取变量document.body.style.getPropertyValue('--primary').trim();//'#7F583F'//删除变量document.body.style.removeProperty('--primary');那些对CSS无用的信息也可以放入CSS变量中。--foo:if(x>5)this.width=10;上面代码中，--foo的值在CSS中是一个无效的语句，但是可以被JavaScript读取。这意味着样式设置可以写在CSS变量中以供JavaScript读取。因此，CSS变量为JavaScript提供了一种与CSS通信的方式。五、与预处理器（sass、less）的比较1.CSS变量：动态的，运行时可以改变，可以方便的从js读写，可以继承，组合，有作用域2.Preprocessor：预处理器的变量预处理器不是动态的，不能在运行时更改。预处理器的变量没有作用域的声明是不能和js交互的。（响应式布局，刹车动画）
