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

Question

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

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

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

Answer 1

最新更新:03/04/2018

CSS变量(自定义属性)已经到来!

另一年另一个浏览器.Edge现在通过支持这个真正伟大的功能加入了Mozilla和Google.

预处理器"不"需要!

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);
}

浏览器支持/兼容性

请参阅caniuse.com了解当前的兼容性.

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

(像往常一样领先.) More info from Mozilla

CHROME:版本49 + (默认启用).

"通过启用实验性网络平台功能,可以在Chrome版本48中启用此功能以进行测试.请chrome://flags/在您的Chrome地址栏中输入以访问此设置."

Safari/IOS Safari:版本9.1/9.3 (默认启用).

Opera:版本39 + (默认启用).

Android:版本52 + (默认启用).

IE:它永远不会发生.

Edge:版本15 + (默认启用).

CSS自定义属性登陆Windows Insider Preview build 14986

W3C SPEC

即将推出的CSS变量的完整规范

Read more

试试看

下面附有小提琴和片段用于测试:

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

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>

Answer 2

您现在无法在CSS中创建变量.如果您需要这种功能,则需要使用像SASS或LESS这样的CSS预处理器.以下是您在SASS中出现的样式:

$Color1:#fff;
$Color2:#b00;
$Color3:#050;

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

它们还允许你做其他(很棒)的东西,比如嵌套选择器:

#some-id {
    color:red;

    &:hover {
        cursor:pointer;
    }
}

这将编译为:

#some-id { color:red; }
#some-id:hover { cursor:pointer; }

查看官方SASS教程以获取设置说明以及有关语法/功能的更多信息.我个人使用Mindscape的Visual Studio扩展名为Web Workbench,以便于开发,其他IDE也有很多插件.

更新

截至2014年7月/ 8月,Firefox已经实现了CSS变量的草案规范,这里是语法:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

Answer 3

它使用CSS,但使用CSS预处理器一样是不可能少或SASS.