79

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

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

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

6 回答 6

155

最新更新：16/01/2020

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

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

需要预处理器“NOT”！

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

对于某些 CSS 声明，可以在级联中将 this 声明得更高一些，让 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 + （默认启用）

自2014 年 起受支持（一如既往地领先。）

More info from 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 版本 14986

IE：当猪飞时。

终于到了让这艘船沉没的时候了。反正没人喜欢骑她。☺</p>

W3C 规范

即将推出的 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>

于 2014-03-30T07:42:40.373 回答
31

你现在不能在 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; }

查看官方 SASS 教程以获取设置说明以及有关语法/功能的更多信息。我个人使用Mindscape的一个名为 Web Workbench 的 Visual Studio 扩展来轻松开发，还有很多其他 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);
}
于 2013-04-05T10:35:33.063 回答
7

使用 CSS 是不可能的，但可以使用 CSS 预处理器，例如less或SASS。

于 2013-04-05T10:35:26.513 回答
4

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

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

于 2013-04-05T10:36:10.403 回答
4

我这样做：

的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; ?>; }
于 2013-09-22T08:39:57.023 回答
2

您将需要 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);
 }
于 2013-04-05T10:36:46.233 回答