创建CSS全局变量：样式表主题管理

一尘不染

创建CSS全局变量：样式表主题管理

css

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

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

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

阅读 420

2020-05-16

共1个答案

一尘不染

最新更新：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变量的完整规范

试试看
下面附有小提琴和摘录以进行测试：

（仅适用于受支持的浏览器。）

: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>

2020-05-16