创建 CSS 全局变量:样式表主题管理 [英] Creating CSS Global Variables : Stylesheet theme management

问题描述

有没有办法在css中设置全局变量比如:

@Color1 = #fff;@Color2 = #b00;h1{颜色:@Color1;背景:@Color2;}

解决方案

最新更新:16/01/2020

CSS 自定义属性(变量)来了！

现在是 2020 年，是时候在您的新应用中正式推出此功能了.

---

预处理器不需要"！

CSS 中有很多重复.一种颜色可以用在多个地方.

对于一些 CSS 声明，可以在级联中将这个声明在更高的位置，让 CSS 继承自然地解决这个问题.

对于非平凡的项目，这并不总是可行的.通过在 :root 伪元素上声明一个变量，CSS 作者可以通过使用该变量来停止某些重复实例.

工作原理

在样式表的顶部设置变量:

CSS

创建一个根类:

:root {}

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

:root {--红色:#b00；--蓝色:#00b；--全宽:100%；}

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

h1 {颜色:var(--red);}#MyText {颜色:var(--blue);宽度:var(--fullwidth);}

---

浏览器支持/兼容性

请参阅

---

Firefox:版本 31+ (默认启用)

自 2014 起支持 (像往常一样引领潮流.)

来自 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 build 14986

---

IE:猪会飞.

是时候让这艘船沉没了.反正没有人喜欢骑她.☺

---

W3C 规范

即将到来的 CSS 变量的完整规范

阅读更多

---

尝试一下

下面附有小提琴和代码片段以供测试:

(它仅适用于受支持的浏览器.)

演示小提琴

:root {--红色:#b00；--蓝色:#4679bd；--灰色:#ddd;--W200: 200px;--Lft:左；}.Bx1,.Bx2，.Bx3,.Bx4 {浮点数:var(--Lft);宽度:var(--W200);高度:var(--W200);边距:10px；填充:10px；边框:1px 实心 var(--red);}.Bx1{颜色:var(--red);背景:var(--grey);}.Bx2{颜色:var(--grey);背景:黑色；}.Bx3 {颜色:var(--grey);背景:var(--blue);}.Bx4 {颜色:var(--grey);背景:var(--red);}

<p>如果您看到四个方框，则变量按预期工作.</p><div class="Bx1">我应该是灰色背景上的红色文本.</div><div class="Bx2">我应该是黑色背景上的灰色文本.</div><div class="Bx3">我应该是蓝色背景上的灰色文本.</div><div class="Bx4">我应该是红色背景上的灰色文本.</div>

Is there a way to set global variables in css such as:

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

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

解决方案

Latest Update: 16/01/2020

CSS Custom Properties (Variables) have arrived!

It's 2020 and time to officially roll out this feature in your new applications.

---

Preprocessor "NOT" required!

There is a lot of repetition in CSS. A single color may be used in several places.

For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally.

For non-trivial projects, this is not always possible. By declaring a variable on the :root pseudo-element, a CSS author can halt some instances of repetition by using the variable.

How it works

Set your variable at the top of your stylesheet:

CSS

Create a root class:

:root {
}

Create variables (-- [String] : [value])

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

Set your variables anywhere in your CSS document:

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

---

BROWSER SUPPORT / COMPATIBILITY

See caniuse.com for current compatability.

---

Firefox: Version 31+ (Enabled by default)

Supported since 2014 (Leading the way as usual.)

More info from Mozilla

---

Chrome: Version 49+ (Enabled by default).

Supported since 2016

---

Safari/IOS Safari: Version 9.1/9.3 (Enabled by default).

Supported since 2016

---

Opera: Version 39+ (Enabled by default).

Supported since 2016

---

Android: Version 52+ (Enabled by default).

Supported since 2016

---

Edge: Version 15+ (Enabled by default).

Supported since 2017

CSS Custom Properties landed in Windows Insider Preview build 14986

---

IE: When pigs fly.

It's time to finally let this ship sink. No one enjoyed riding her anyway. ☺

---

W3C SPEC

Full specification for upcoming CSS variables

Read more

---

TRY IT OUT

A fiddle and snippet are attached below for testing:

(It will only work with supported browsers.)

DEMO FIDDLE

: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 全局变量:样式表主题管理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！