参考地址 css的var()函数
随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。
兼容性
css，以及浏览器的更新迭代下，浏览器过于新的或者过于旧的版本都是存在兼容的情况的。
使用方法
通过-- + 字段名：值（这个值可以是任何我们在css输入的值）进行定义类似的js的定义，调用时候通过var()函数进行对应的调用，如下面代码一样var(--字段名)进行调用
body {
--size: 20px;
font-size: var(--size); // 20px
padding:var(--size); // 20px
}如上面代码一样通过定义--size为20px，然后font-size和padding同时通过var()函数进行复用，同时将font-size和padding设置为20px。当然如果不一定是20px，也是可以通过计算进行对应的如calc(var(--size) * 2)，这样的话就相当于变成40px。但是这样写也是会有一点不好的就是，类似js的块级元素，在body{}里定义的的--size是无法在其他样式类名中进行调用的
.test{
--size: 20px;
font-size: var(--size); // 20px
padding:calc(var(--size) * 2) // 40rpx
}
.test2{
font-size: var(--size); // 无法识别
}但是也是有些需要注的地方，例如
// 错误写法.test{--size: 20;font-size: var(--size)px; // 这里的写法是错误，这样会读取成font-size:20 px,值的中间会多了一个空格，导致读取失败}// 正确写法.test2{--size: 20px;--size2: 20;font-size: var(--size);font-size: calc(var(--size2) * 1px);}我们在使用var的时候会发现，在样式中定义的字段只能在某个样式中使用，类似es6的{}，在里面定义的只能在里面进行使用，为了更加便捷的使用，var()还是有公用定义字段的方法的。
通过在:root定义的字段，就相当于css中的全局变量，可以在css中任意的样式中进行使用
:root{--size:20px;}.test{font-size: var(--size); // 20px}.test2{font-size: var(--size); // 20px}最后，如果你问我用sass和less去对比var()的话，我还是会用sass或者less，无论是可变性还是测试上都会比较方便，因为在使用var()定义的字段，在审查元素中的样式也只会显示--字段名，如果你是全局的话，就基本上去微调样式的时候，就会牵一发而动全身，这样无论是测试修改上，还是编写的时候，都会造成不必要的麻烦。当然最重要的还是浏览器的兼容性，都是预编译上的使用更加的合理。