如何在 CSS 中将颜色定义为变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1875852/
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
How can I define colors as variables in CSS?
提问by patrick
I'm working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just change a variable to have the new color applied to all elements that use it?
我正在处理一个很长的 CSS 文件。我知道客户可能会要求更改配色方案，并且想知道：是否可以将颜色分配给变量，以便我可以更改一个变量以将新颜色应用于所有使用它的元素？
Please note that I can't use PHP to dynamically change the CSS file.
请注意，我不能使用 PHP 来动态更改 CSS 文件。
回答by Arthur Weborg
CSS supports this natively with CSS Variables.
CSS 通过CSS Variables 原生支持这一点。
Example CSS file
示例 CSS 文件
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}
For a working example, please see this JSFiddle(the example shows one of the CSS selectors in the fiddle has the color hard coded to blue, the other CSS selector uses CSS variables, both original and current syntax, to set the color to blue).
有关工作示例，请参阅此 JSFiddle（示例显示小提琴中的一个 CSS 选择器将颜色硬编码为蓝色，另一个 CSS 选择器使用 CSS 变量，包括原始语法和当前语法，将颜色设置为蓝色） .
Manipulating a CSS variable in JavaScript/client side
在 JavaScript/客户端操作 CSS 变量
document.body.style.setProperty('--main-color',"#6c0")
Support is in all the modern browsers
所有现代浏览器都支持
Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+and Opera 36+ship with native support for CSS variables.
Firefox 31+、Chrome 49+、Safari 9.1 +、Microsoft Edge 15+和Opera 36+自带对 CSS 变量的支持。
回答by wheresrhys
People keep upvoting my answer, but it's a terrible solution compared to the joy of sassor less, particularly given the number of easy to use gui's for boththese days. If you have any sense ignore everything I suggest below.
人们一直在支持我的答案，但与sass或更少的乐趣相比，这是一个糟糕的解决方案，尤其是考虑到这两天易于使用的gui数量。如果您有任何感觉，请忽略我在下面建议的所有内容。
You could put a comment in the css before each colour in order to serve as a sort of variable, which you can change the value of using find/replace, so...
您可以在 css 中的每种颜色之前添加注释以用作某种变量，您可以更改使用查找/替换的值，因此...
At the top of the css file
在 css 文件的顶部
/********************* Colour reference chart****************
*************************** comment ********* colour ********
box background colour bbg #567890
box border colour bb #abcdef
box text colour bt #123456
*/
Later in the CSS file
稍后在 CSS 文件中
.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}
Then to, for example, change the colour scheme for the box text you do a find/replace on
然后，例如，更改您执行查找/替换的框文本的配色方案
/*bt*/#123456
回答by singingwolfboy
CSS itself doesn't use variables. However, you can use another language like SASSto define your styling using variables, and automatically produce CSS files, which you can then put up on the web. Note that you would have to re-run the generator every time you made a change to your CSS, but that isn't so hard.
CSS 本身不使用变量。但是，您可以使用另一种语言（如SASS）来使用变量定义样式，并自动生成 CSS 文件，然后您可以将这些文件放在网络上。请注意，每次对 CSS 进行更改时，您都必须重新运行生成器，但这并不难。
回答by Vitalii Fedorenko
回答by Corey Ballou
There's no easy CSS only solution. You could do this:
没有简单的 CSS 唯一解决方案。你可以这样做：
Find all instances of
background-colorandcolorin your CSS file and create a class name for each unique color..top-header { color: #fff; } .content-text { color: #f00; } .bg-leftnav { background-color: #fff; } .bg-column { background-color: #f00; }Next go through every single page on your site where color was involved and add the appropriate classes for both color and background color.
Last, remove any references of colors in your CSS other than your newly created color classes.
在您的 CSS 文件中找到 和 的所有实例，
background-color并color为每种独特的颜色创建一个类名。.top-header { color: #fff; } .content-text { color: #f00; } .bg-leftnav { background-color: #fff; } .bg-column { background-color: #f00; }接下来浏览站点上涉及颜色的每个页面，并为颜色和背景颜色添加适当的类。
最后，删除 CSS 中除新创建的颜色类之外的任何颜色引用。
回答by Alireza
Yeeeaaahhh.... you can now use var() function in CSS.....
Yeeeaaahhh.... 你现在可以在CSS 中使用var() 函数了.....
The good news is you can change it using JavaScriptaccess, which will change globally as well...
好消息是您可以使用JavaScript访问来更改它，这也会在全球范围内更改...
But how to declare them...
但是如何声明它们...
It's quite simple:
这很简单：
For example, you wanna assign a #ff0000to a var(), just simply assign it in :root, also pay attention to --:
例如，您想将 a 分配#ff0000给 a var()，只需将其分配给:root，还要注意--：
:root {
--red: #ff0000;
}
html, body {
background-color: var(--red);
}
The good things are the browser support is not bad, also don't need to be compiled to be used in the browser like LESSor SASS...
好处是浏览器支持还不错，也不需要像LESS或SASS...
Also, here is a simple JavaScript script, which changes the red value to blue:
此外，这是一个简单的 JavaScript 脚本，它将红色值更改为蓝色：
const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');
回答by Erin
The 'Less' Ruby Gem for CSS looks awesome.
用于 CSS 的“Less”Ruby Gem 看起来很棒。
回答by Sliq
Yes, in near future (i write this in june 2012) you can define native css variables, without using less/sass etc ! The Webkit engine just implemented first css variable rules, so cutting edge versions of Chrome and Safari are already to work with them. See the Official Webkit (Chrome/Safari) development log with a onsite css browser demo.
是的，在不久的将来（我是在 2012 年 6 月写的），您可以定义原生 css 变量，而无需使用 less/sass 等！Webkit 引擎刚刚实现了第一个 css 变量规则，因此 Chrome 和 Safari 的尖端版本已经可以使用它们。请参阅带有现场 css 浏览器演示的官方 Webkit (Chrome/Safari) 开发日志。
Hopefully we can expect widespread browser support of native css variables in the next few months.
希望在接下来的几个月中，我们可以期待浏览器对原生 css 变量的广泛支持。
回答by Eric Harms
Do not use css3 variables due to support.
由于支持，请勿使用 css3 变量。
I would do the following if you want a pure css solution.
如果您想要纯 css 解决方案，我会执行以下操作。
Use color classes with semenaticnames.
.bg-primary { background: #880000; } .bg-secondary { background: #008800; } .bg-accent { background: #F5F5F5; }Separate the structure from the skin (OOCSS)
/* Instead of */ h1 { font-size: 2rem; line-height: 1.5rem; color: #8000; } /* use this */ h1 { font-size: 2rem; line-height: 1.5rem; } .bg-primary { background: #880000; } /* This will allow you to reuse colors in your design */Put these inside a separate css file to change as needed.
使用带有语义名称的颜色类。
.bg-primary { background: #880000; } .bg-secondary { background: #008800; } .bg-accent { background: #F5F5F5; }将结构与皮肤分离 (OOCSS)
/* Instead of */ h1 { font-size: 2rem; line-height: 1.5rem; color: #8000; } /* use this */ h1 { font-size: 2rem; line-height: 1.5rem; } .bg-primary { background: #880000; } /* This will allow you to reuse colors in your design */将这些放在单独的 css 文件中以根据需要进行更改。
回答by superluminary
Consider using SCSS. It's full compatible with CSS syntax, so a valid CSS file is also a valid SCSS file. This makes migration easy, just change the suffix. It has numerous enhancements, the most useful being variables and nested selectors.
考虑使用 SCSS。它与 CSS 语法完全兼容，因此有效的 CSS 文件也是有效的 SCSS 文件。这使迁移变得容易，只需更改后缀即可。它有许多增强功能，最有用的是变量和嵌套选择器。
You need to run it through a pre-processor to convert it to CSS before shipping it to the client.
在将其发送到客户端之前，您需要通过预处理器运行它以将其转换为 CSS。
I've been a hardcore CSS developer for many years now, but since forcing myself to do a project in SCSS, I now won't use anything else.
我多年来一直是一名铁杆 CSS 开发人员，但自从强迫自己在 SCSS 中做一个项目后，我现在不会使用其他任何东西。
