css变量

前言

在2017年三月，微软渲染edge浏览器支持css变量。这一重要的css新功能，所有的主要浏览器已经都支持了。

变量的声明

声明变量的时候，变量名前面要加两根连词线（--）。

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

上面代码中，body选择器里面声明了两个变量：--foo和--bar。 它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以css变量又叫做“css自定义属性”。因为变量与自定义的css属性其实是一回事。