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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

@Color1 = #fff;
@Color2 = #b00;
h1 {
  color:@Color1;
  background:@Color2;
}

回答：

最新更新：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);
}

回答：

Version + (Enabled by default)

Supported since (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 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>

以上是 创建CSS全局变量：样式表主题管理 的全部内容， 来源链接： utcz.com/qa/408896.html

回到顶部