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

Question

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

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

Answer 1

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变量的原生支持.

Answer 2

人们不断提高我的答案,但与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

Answer 3

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

Answer 4

你可以试试CSS3变量:

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

Answer 5

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

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

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

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

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

Answer 6

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');

Answer 7

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

http://lesscss.org/

Answer 8

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

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

Answer 9

由于支持，请勿使用 css3 变量。

如果您想要纯 css 解决方案，我会执行以下操作。

1. 使用带有语义名称的颜色类。

   .bg-primary   { background: #880000; }
   
   .bg-secondary { background: #008800; }
   
   .bg-accent    { background: #F5F5F5; }
   

2. 将结构与皮肤分离 (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 */
   

3. 将这些放在单独的 css 文件中以根据需要进行更改。

Answer 10

当然可以，多亏了多个类的奇妙世界，可以做到这一点：

.red {color:red}
.blackBack {background-color: black}

但我经常最终将它们组合起来，如下所示：

.highlight {color:red, background-color: black}

我知道语义警察会监视你，但它确实有效。