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

问题描述

有一种方法可以在css中设置全局变量，例如：

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

解决方案

30/09/2016

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

另一年的另一个浏览器。 Google已经加入Mozilla，支持这个真正伟大的功能。

FIREFOX：版本 31 + （默认情况下已启用）

Mozilla的更多信息

CHROME：版本 49 + （默认启用）

。

此功能可以在Chrome版本48中启用， $ c> experimental Web Platform 功能。在您的Chrome地址栏中输入 chrome：// flags / 即可访问此设置。

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

Opera 版本 39 + （默认情况下已启用）。

Android：版本 52 + （默认情况下已启用）。

IE：永远不会发生。

边缘 b
$ b

href =https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261292-css-variables =nofollow noreferrer>

VOTE HERE

IE ROAD地图

查看完整的支持列表

---

W3C SPEC b

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

阅读更多

---

试用

下面附上一个小提琴和摘要，用于测试：

//jsfiddle.net/5hCtL/90/rel =nofollow noreferrer>

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（ -  gray）;}。Bx2 {color：var（ -  grey）; background：black;}。Bx3 {color：var（ -  grey）; background：var（ -  blue）;}。Bx4 {color：var（ -  grey）; background：var（ -  red）;}  

  < / p>< div class =Bx1>我应该是灰色背景上的红色文字。< / div>< div class = < / div>< div class =Bx3>我应该是黑色背景上的灰色文字。 >我应该是红色背景上的灰色文字。< / div>  

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

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

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

解决方案

Latest Update: 30/09/2016

CSS Variables (Custom Properties) have arrived!

Another year another browsers. Google has now joined Mozilla by supporting this truely great feature.

YOU CAN NOW VOTE ON THIS FOR EDGE DEVELOPMENT

---

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

:root {
    --bgd: #333;
}

Add names for your variable followed by a value:

(names can be any string you choose.)

: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

FIREFOX: Version 31+ (Enabled by default)

(Leading the way as usual.) More info from Mozilla

CHROME: Version 49+ (Enabled by default).

"This feature can be enabled in Chrome Version 48 for testing by enabling the experimental Web Platform feature. Enter chrome://flags/ in your Chrome address bar to access this setting."

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

Opera: Version 39+ (Enabled by default).

Android: Version 52+ (Enabled by default).

IE: It's never going to happen.

Edge: In development.

"You can now vote on this to pump it up the development road map"

VOTE HERE

IE ROAD MAP

VIEW FULL SUPPORT LIST

---

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屋！