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

Question

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

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

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

Answer 1

最新更新： 03/04/2018

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

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

预处理器＆＃34; NOT＆＃34; 需要！

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 + （默认情况下已启用）。

＆＃34;可以在Chrome版本48中启用此功能，以便通过启用实验性Web平台功能进行测试。在Chrome地址栏中输入chrome://flags/即可访问此设置。＆＃34;

Safari / IOS Safari：版本9.1 / 9.3 （默认情况下已启用）。

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

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

IE：它永远不会发生。

边缘版本 15 + （默认情况下已启用）。

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

W3C SPEC

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

Read more

尝试一下

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

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

DEMO FIDDLE

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您现在无法在CSS中创建变量。如果您需要此类功能，则需要使用CSS预处理器，如SASS或LESS。以下是您在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; }

查看official SASS tutorial有关设置说明以及有关语法/功能的更多信息。我个人使用名为Web Workbench by Mindscape的Visual Studio扩展来轻松开发，其他IDE也有很多插件。

更新

截至2014年7月/ 8月，Firefox已为CSS变量实现了draft spec，这里是语法：

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

Answer 3

使用CSS是不可能的，但是使用像less或SASS这样的CSS预处理器。

Answer 4

尝试SASS http://sass-lang.com/或LESS http://lesscss.org/

我喜欢SASS并将其用于我的所有项目。

Answer 5

我是这样做的：

html：

<head>
    <style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>

xCss.php：

<? // place here your vars
$fntBtn = 'bold 14px  Arial'
$colBorder  = '#556677' ;
$colBG0     = '#dddddd' ;
$colBG1     = '#44dddd' ;
$colBtn     = '#aadddd' ;

// here goes your css after the php-close tag: 
?>
button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }

Answer 6

你需要LESS或SASS ...

但是，我认为这是另一种替代方案，我相信它将在CSS3中实现。

http://css3.bradshawenterprises.com/blog/css-variables/

示例：

 :root {
    -webkit-var-beautifulColor: rgba(255,40,100, 0.8);
    -moz-var-beautifulColor: rgba(255,40,100, 0.8);
    -ms-var-beautifulColor: rgba(255,40,100, 0.8);
    -o-var-beautifulColor: rgba(255,40,100, 0.8);
    var-beautifulColor: rgba(255,40,100, 0.8);
 }
  .example1 h1 {
    color: -webkit-var(beautifulColor);
    color: -moz-var(beautifulColor);
    color: -ms-var(beautifulColor);
    color: -o-var(beautifulColor);
    color: var(beautifulColor);
 }

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

6 个答案:

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

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

如何运作

浏览器支持/兼容性

尝试一下

更新