创建 CSS 全局变量：样式表主题管理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15831657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating CSS Global Variables : Stylesheet theme management
提问by DreamTeK
Is there a way to set global variables in css such as:
有没有办法在css中设置全局变量，例如：
@Color1 = #fff;
@Color2 = #b00;
h1 {
color:@Color1;
background:@Color2;
}
回答by DreamTeK
Latest Update: 16/01/2020
最新更新：16/01/2020
CSS Custom Properties (Variables) have arrived!
CSS 自定义属性（变量）来了！
It's 2020 and time to officially roll out this feature in your new applications.
现在是 2020 年，是时候在您的新应用程序中正式推出此功能了。
Preprocessor "NOT"required!
预处理器“不需要”！
There is a lot of repetition in CSS. A single color may be used in several places.
CSS中有很多重复。可以在多个地方使用单一颜色。
For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally.
对于一些 CSS 声明，可以在级联中将其声明为更高，让 CSS 继承自然地解决这个问题。
For non-trivial projects, this is not always possible. By declaring a variable on the :rootpseudo-element, a CSS author can halt some instances of repetition by using the variable.
对于非平凡的项目，这并不总是可行的。通过在:root伪元素上声明一个变量，CSS 作者可以通过使用该变量来停止一些重复的实例。
How it works
这个怎么运作
Set your variable at the top of your stylesheet:
在样式表的顶部设置变量：
CSS
CSS
Create a root class:
创建一个根类：
:root {
}
Create variables (-- [String]: [value])
创建变量 (-- [String]: [value])
:root {
--red: #b00;
--blue: #00b;
--fullwidth: 100%;
}
Set your variables anywhere in your CSS document:
在 CSS 文档中的任意位置设置变量：
h1 {
color: var(--red);
}
#MyText {
color: var(--blue);
width: var(--fullwidth);
}
BROWSER SUPPORT / COMPATIBILITY
浏览器支持/兼容性
See caniuse.comfor current compatability.
请参阅caniuse.com了解当前的兼容性。
Firefox:Version 31+ (Enabled by default)
Firefox：版本31+ （默认启用）
Supported since 2014(Leading the way as usual.)
自2014 年起支持（像往常一样领先。）
Chrome:Version 49+ (Enabled by default).
Chrome：版本49+ （默认启用）。
Supported since 2016
自2016 年起支持
Safari/IOS Safari:Version 9.1/9.3 (Enabled by default).
Safari/IOS Safari：版本 9.1/9.3 （默认启用）。
Supported since 2016
自2016 年起支持
Opera:Version 39+ (Enabled by default).
Opera：版本39+ （默认启用）。
Supported since 2016
自2016 年起支持
Android:Version 52+ (Enabled by default).
Android：版本52+ （默认启用）。
Supported since 2016
自2016 年起支持
Edge:Version 15+ (Enabled by default).
Edge：版本15+ （默认启用）。
Supported since 2017
自2017 年起支持
CSS Custom Properties landed in Windows Insider Preview build 14986
CSS 自定义属性登陆 Windows Insider Preview build 14986
IE:When pigs fly.
IE：当猪飞的时候。
It's time to finally let this ship sink. No one enjoyed riding her anyway. ?
是时候让这艘船沉没了。反正没有人喜欢骑她。?
W3C SPEC
W3C规范
Full specification for upcoming CSS variables
即将到来的 CSS 变量的完整规范
TRY IT OUT
试试看
A fiddle and snippet are attached below for testing:
下面附上一个小提琴和片段用于测试：
(It will only work with supported browsers.)
（它仅适用于受支持的浏览器。）
: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>回答by Daniel Imms
You can't create variables in CSS right now. If you want this sort of functionality you will need to use a CSS preprocessor like SASSor LESS. Here are your styles as they would appear in SASS:
您现在无法在 CSS 中创建变量。如果您想要这种功能，您将需要使用 CSS 预处理器，如SASS或LESS。以下是您在 SASS 中出现的样式：
$Color1:#fff;
$Color2:#b00;
$Color3:#050;
h1 {
color:$Color1;
background:$Color2;
}
They also allow you to do other (awesome) things like nesting selectors:
它们还允许你做其他（很棒的）事情，比如嵌套选择器：
#some-id {
color:red;
&:hover {
cursor:pointer;
}
}
This would compile to:
这将编译为：
#some-id { color:red; }
#some-id:hover { cursor:pointer; }
Check out the official SASS tutorialfor setup instructions and more on syntax/features. Personally I use a Visual Studio extension called Web Workbench by Mindscapefor easy developing, there are a lot of plugins for other IDEs as well.
查看官方 SASS 教程以获取设置说明以及有关语法/功能的更多信息。我个人使用Mindscape 的名为Web Workbench的 Visual Studio 扩展来轻松开发，其他 IDE 也有很多插件。
Update
更新
As of July/August 2014, Firefox has implemented the draft specfor CSS variables, here is the syntax:
截至 2014 年 7 月/8 月，Firefox 已经实现了CSS 变量的规范草案，这里是语法：
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
回答by deceze
回答by joshuahornby10
Try SASS http://sass-lang.com/or LESS http://lesscss.org/
尝试 SASS http://sass-lang.com/或 LESS http://lesscss.org/
I love SASS and use it for all my projects.
我喜欢 SASS 并将其用于我所有的项目。
回答by Helmo56
I do it this way:
我这样做：
The html:
html：
<head>
<style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>
The xCss.php:
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; ?>; }
回答by Rahul Patil
You will either need LESS or SASS for the same..
您将需要 LESS 或 SASS 才能实现相同的效果。
But here is another alternative which I believe will work out in CSS3..
但这里有另一种选择，我相信它会在 CSS3 中解决。
http://css3.bradshawenterprises.com/blog/css-variables/
http://css3.bradshawenterprises.com/blog/css-variables/
Example :
例子 ：
: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);
}
