前端程序员必学的CSS变量知识

这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。

一、变量的声明

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

上面代码中，body选择器里面声明了两个变量：–foo和**–bar .**

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做**“CSS 自定义属性”**（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

你可能会问，为什么选择两根连词线（–）表示变量？因为**$foo被 Sass 用掉了，@foo**被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

各种值都可以放入 CSS 变量。

变量名大小写敏感，–header-color和