CSS变量（css variable）

不知道大家有没有用过less和sass，我是在用webpack和gulp做的几次项目做用过几次
用过的同学都知道less和sass写样式可以按照层级写
非常方便，标签关系一眼看穿
其中sass和less还有一个规定变量的功能，大家定义常用的样式作为一个变量需要用的时候直接用就行了
不需要重复写，非常方便

所以我一直以为只有less和sass里才能设置变量
但是今天在看项目代码的时候发现css现在已经支持变量了
很是有趣，于是便了解了一下

贴代码

:root{
    --width: 100px;
    --height: 50px;
    --background: red;
}

这样我们就定义一些样式的代码，怎么定义呢？
就是在你需要重复使用的样式，给它一个变量名，然后再前面加- -
然后在写上对应的样式就可以了
顺便介绍一下：root
这表示根标签，在HTML里面就是表示<\html>了

然后怎么用呢

div{
     width: var(--width);
     height: var(--height);
     background: var(--background);
 }

就像上面一样，使用var（变量名）就可以了
这样，大家在定义样式的时候用到重复的变量就有解决方案了

对了，还有一个问题，大家有没有注意到为什么我是在根标签上定义的变量
我是这样理解的
大家都知道变量提升和访问限制吧
全局的作用域不能访问函数作用域的变量，但是反向却可以
所以我在根标签定义变量，也想到与定义了一个全局变量，都能用
因此，我们在定义变量的时候也需要考虑到该元素的层级，子元素是能引用，可能父元素并不能应用你在子元素定义的变量
大家用的时候得注意一下，尽量选择更高的层级