如何在CSS中将颜色定义为变量？

我正在研究一个很长的CSS文件.我知道客户端可能会要求更改配色方案,并且想知道:是否可以为变量指定颜色,以便我可以更改变量以将新颜色应用于使用它的所有元素？

请注意,我无法使用PHP动态更改CSS文件.

1> Arthur Webor..：

---

CSS使用CSS变量本地支持这一点.

示例CSS文件

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

对于一个工作示例,请看这个JSFiddle(示例显示小提琴中的一个CSS选择器的颜色硬编码为蓝色,另一个CSS选择器使用CSS变量,原始和当前语法,将颜色设置为蓝色) .

在JavaScript /客户端操作CSS变量

document.body.style.setProperty('--main-color',"#6c0")

支持在所有现代浏览器中

Firefox 31 +,Chrome 49 +,Safari 9.1 +,Microsoft Edge 15+和Opera 36+都附带了对CSS变量的原生支持.

---

以防万一其他人阅读本文并试图让它在Safari中运行 - 对CSS的支持似乎已于2013年春/夏季从Webkit中删除.https://bugs.webkit.org/show_bug.cgi？id = 114119 https ://lists.webkit.org/pipermail/webkit-dev/2013-April/024476.html启用上述标志后仍可在Chrome中使用.

2> wheresrhys..：

---

人们不断提高我的答案,但与sass或更少的快乐相比,这是一个可怕的解决方案,特别是考虑到这两天易于使用的gui的数量.如果你有任何意义,请忽略我在下面建议的一切.

您可以在每种颜色之前在css中添加注释,以便作为一种变量,您可以更改使用find/replace的值,所以...

在css文件的顶部

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

稍后在CSS文件中

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

然后,例如,更改您执行查找/替换的框文本的颜色方案

/*bt*/#123456

---

添加注释在少数情况下不起作用,例如使用IE过滤器时.我不能在这里添加注释 - > filter:progid:DXImageTransform.Microsoft.gradient(startColorstr ='#3f5619',endColorstr ='#77842f',GradientType = 0);/*IE6-9*/

3> singingwolfb..：

---

CSS本身不使用变量.但是,您可以使用SASS之类的其他语言来定义使用变量的样式,并自动生成CSS文件,然后您可以将其放在Web上.请注意,每次对CSS进行更改时都必须重新运行生成器,但这并不难.

---

我认为答案现在(2016)不正确,不是吗？虽然我认为使用SASS等可能会更好.

4> Vitalii Fedo..：

---

你可以试试CSS3变量:

body {
  --fontColor: red;
  color: var(--fontColor);
}

5> Corey Ballou..：

---

没有简单的CSS解决方案.你可以这样做:

查找CSS文件中的所有实例,background-color并color为每种唯一颜色创建一个类名.

.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }

接下来浏览您网站上涉及颜色的每个页面,并为颜色和背景颜色添加适当的类.

最后,除了新创建的颜色类之外,删除CSS中任何颜色的引用.

---

@downvoters,这是一个**CSS ONLY**解决方案.有很多替代解决方案涉及脚本或CLI,这适用于*不打算这样做*.

6> Alireza..：

---

Yeeeaaahhh ....你现在可以使用VAR（ ）函数在CSS .. ...

好消息是您可以使用JavaScript访问来更改它，这也会在全球范围内更改...

但是如何声明它们...

很简单：

例如，您想要将分配#ff0000给var()，只需在中简单地分配:root，还要注意--：

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

好东西不坏，也不需要浏览器的支持也被编译像在浏览器中使用LESS或SASS...

另外，这是一个简单的JavaScript脚本，它将红色值更改为蓝色：

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');

7> 小智..：

---

用于CSS的'Less'Ruby Gem看起来很棒.

http://lesscss.org/

---

我认为LESS的优点在于它不是Ruby或任何特定的框架.它可以在客户端"编译"或与django-css https://github.com/dziegler/django-css等任何其他框架一起使用

8> Sliq..：

---

是的,在不久的将来(我在2012年6月写这篇文章)你可以定义原生的css变量,而不使用less/sass等!Webkit引擎刚刚实现了第一个css变量规则,因此Chrome和Safari的最新版本已经可以使用它们了.使用现场css浏览器演示,查看官方Webkit(Chrome/Safari)开发日志.

希望我们可以期待在接下来的几个月内对本机css变量进行广泛的浏览器支持.

---

@Daniel让那个2015年