var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。

函数语法:

var(name,value)

例如:

--set-color:red

var(--set-color)

第一行是设置自定义的属性的名字与值。

第二行是通过这个属性名来调用这个值。

注:名字可随意设置但必须以双破折号开头。

 

一共两种写法

第一种，私域写法。

#div1{

--size1:20px;

--size2:20;

font-size:var(--size1);//这行代码等于 font-size:20px;  ✓

font-size:var(--size2)px;//这行代码等于  font-size:20 px; ×  会出现读取错误。

font-size:var(--size2)*1px;//这行代码等于  font-size:20px; ✓  正确写法。

}

这种写法设置和调用都在一个{}中，内部设置的自定义样式不能被外部调用，类似js中的私域量。如果想全局调用，可以用第二种写法。

 

第二种，全局写法。

通过伪类root字段定义自定义属性。

:root{--size1:20px;}

#div1{

font-size:var(--size1);//这行代码等于 font-size:20px;  ✓

}

#div2{

font-size:var(--size1);//这行代码等于 font-size:20px;  ✓

}

这种写法中定义的属性属于全局量，可以在同一个css中任何地方调用。类似于js中的全局变量。

 

 

如果你问我用sass和less去对比var()的话，我还是会用sass或者less，无论是可变性还是测试上都会比较方便，因为在使用var()定义的字段，在审查元素中的样式也只会显示--字段名，如果你是全局的话，就基本上去微调样式的时候，就会牵一发而动全身，这样无论是测试修改上，还是编写的时候，都会造成不必要的麻烦。当然最重要的还是浏览器的兼容性，都是预编译上的使用更加的合理。

 

参考内容:w3cschool。csdn。