有没有办法在 css 中设置全局变量，例如：

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}

最新更新：16/01/2020

CSS 自定义属性（变量）已经到来！

2020 年到了，是时候在您的新应用程序中正式推出此功能了。

预处理器"NOT"必需的！

CSS中有很多重复的地方。单一颜色可以用在多个地方。

对于某些 CSS 声明，可以在级联中声明得更高，让 CSS 继承自然地解决这个问题。

对于重要的项目来说，这并不总是可能的。通过声明一个变量:root伪元素，CSS 作者可以通过使用该变量来停止某些重复实例。

怎么运行的

在样式表顶部设置变量：

CSS

创建根类：

:root {
}

创建变量（--[String] : [value])

:root {
  --red: #b00;
  --blue: #00b;
  --fullwidth: 100%;
}

在 CSS 文档中的任意位置设置变量：

h1 {
  color: var(--red);
}
#MyText {
  color: var(--blue);
  width: var(--fullwidth);
}

浏览器支持/兼容性

See caniuse.com为了当前的兼容性。

Firefox:版本31+ （默认启用）

支持自2014 （像往常一样在前面带路。）

More info from Mozilla

Chrome:版本49+ （默认启用）.

支持自2016

Safari/IOS Safari：版本9.1/9.3（默认启用）.

支持自2016

Opera:版本39+ （默认启用）.

支持自2016

Android:版本52+ （默认启用）.

支持自2016

Edge:版本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 class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>