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

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

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


h1 {
color:@Color1;
background:@Color2;
}
136505 次浏览
小开

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

小开

现在不能在 CSS 中创建变量。如果您想要这种功能，您将需要使用一个 CSS 预处理器，如 SASS或 更少。以下是你在 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);
}
小开

尝试 SASS http://sass-lang.com/或更少的 http://lesscss.org/

我喜欢 SASS，我所有的项目都使用它。

小开

你要么需要更少，或 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);
}
小开

我是这么做的:

译者:

<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; ?>; }
小开
最佳答案

最新更新: 2020年1月16日

CSS 自定义属性(变量)已经到达！

现在是2020年，是时候在新的应用程序中正式推出这个特性了。

需要预处理器 “不”！

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

对于某些 CSS 声明，可以在级联中更高级地声明它，并让 CSS 继承自然地解决这个问题。

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

它是如何工作的

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

CSS

创建一个根类:

:root {
}

创建变量(—— [字符串]: [价值])

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

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

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

浏览器支持/兼容性

有关当前兼容性，请参见 Caniuse.com。

![supported browsers

Firefox: Version 31 + < em > (默认启用)

支持自 二零一四年 (像往常一样带路)

More info from Mozilla

Chrome: 版本 49 + (默认启用)。

从 二零一六年开始支持

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

从 二零一六年开始支持

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

从 二零一六年开始支持

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

从 二零一六年开始支持

边缘: 版本 15 + (默认启用)。

从 二零一七年开始支持

CSS 自定义属性在 WindowsInsider 预览版14986中着陆

猪会飞的时候。

是时候让这艘船沉没了。反正没有人喜欢骑着她。 

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>


提交答案