最新更新：16/01/2020
CSS自定义属性（变量）已经到来！到了2020年，是时候正式在您的新产品中推出此功能了
应用程序。
需要预处理器“ NOT”！
CSS中有很多重复。可以在多个地方使用一种颜色。
对于某些CSS声明，可以在级联中声明更高的位置，并让CSS继承自然解决此问题。
对于非平凡的项目，这并不总是可能的。通过在:root伪元素上声明一个变量，CSS作者可以使用该变量终止某些重复实例。
怎么运行的将变量设置在样式表的顶部：
CSS
创建一个根类：
:root {}Create variables (– [String] : [value] )
:root { --red: #b00; --blue: #00b; --fullwidth: 100%;}在CSS文档中的任何位置设置变量：
h1 { color: var(--red);}#MyText { color: var(--blue); width: var(--fullwidth);}BROWSER SUPPORT / COMPATIBILITY
Firefox: Version 31 + (Enabled by default)
Supported since 2014 (Leading the way as usual.)
[More info from Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
*Chrome：版本49 + （默认启用）。
自2016年以来受支持
Safari / IOS Safari： 9.1 / 9.3版（默认启用）。
自2016年以来受支持
Opera：版本39 + （默认情况下启用）。
自2016年以来受支持
Android：版本52 + （默认情况下启用）。
自2016年以来受支持
边缘：版本15 + （默认情况下启用）。
自2017年以来受支持
CSS自定义属性进入Windows Insider Preview内部版本14986
IE：当猪飞。
现在是时候让这艘船沉没了。无论如何，没人喜欢骑她。☺
W3C SPEC
即将到来的CSS变量的完整规范
Read more
试试看
下面附有小提琴和摘录以进行测试：
（仅适用于受支持的浏览器。）
:root { --red: #b00; --blue: #4679bd; --grey: #ddd; --W200: 200px; --Lft: left;}.Bx1,.Bx2,.Bx3,.Bx4 { float: var(--Lft); width: var(--W200); height: var(--W200); margin: 10px; padding: 10px; border: 1px solid var(--red);}.Bx1 { color: var(--red); background: var(--grey);}.Bx2 { color: var(--grey); background: black;}.Bx3 { color: var(--grey); background: var(--blue);}.Bx4 { color: var(--grey); background: var(--red);}<p>If you see four square boxes then variables are working as expected.</p><div >I should be red text on grey background.</div><div >I should be grey text on black background.</div><div >I should be grey text on blue background.</div><div >I should be grey text on red background.</div>
