我正在处理一个很长的CSS文件。我知道客户可以要求更改配色方案，并且想知道：是否可以将颜色分配给变量，以便我可以更改变量以将新颜色应用于使用该颜色的所有元素？
请注意，我不能使用PHP动态更改CSS文件。
Answers:
CSS本身通过CSS Variables支持此功能。
示例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变量的本机支持。
人们不断upvoting我的答案，但相比的喜悦这是一个可怕的解决方案SASS或更少，特别是考虑到方便的使用数量GUI的两种这些天。如果您有任何想法，请忽略以下所有建议。
您可以在每种颜色之前的css中添加注释，以用作一种变量，您可以更改使用查找/替换的值，因此...
在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您可以尝试CSS3变量：
body {
--fontColor: red;
color: var(--fontColor);
}没有简单的CSS唯一解决方案。您可以这样做：
在CSS文件中找到和的所有实例，background-color然后color为每种唯一的颜色创建一个类名。
.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }接下来，遍历网站上涉及颜色的每个页面，并为颜色和背景色添加适当的类。
最后，删除CSS中除新创建的颜色类以外的所有颜色引用。
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');CSS的“少” Ruby Gem看起来很棒。
是的，在不久的将来（我在2012年6月撰写了这篇文章），您可以定义本机CSS变量，而无需使用less / sass等！Webkit引擎刚刚实现了第一个CSS变量规则，因此最先进的Chrome和Safari版本已经可以使用它们。请参阅带有官方 CSS浏览器演示的Official Webkit（Chrome / Safari）开发日志。
希望我们能在未来几个月内获得对本机CSS变量的广泛浏览器支持。
由于支持，请勿使用css3变量。
如果您想要纯CSS解决方案，我将执行以下操作。
将颜色类别与语义名称一起使用。
.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文件中，以根据需要进行更改。
dicejs.com（通常为cssobjs）是SASS的客户端版本。您可以在CSS中设置变量（以json格式的CSS存储），然后重新使用颜色变量。
//create the CSS JSON object with variables and styles
var myCSSObjs = {
cssVariables : {
primaryColor:'#FF0000',
padSmall:'5px',
padLarge:'$expr($padSmall * 2)'
}
'body' : {padding:'$padLarge'},
'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
'.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};
//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();这里是一个完整的可下载演示的链接，它比其文档更有帮助：dicejs演示
如果您的系统上装有Ruby，则可以执行以下操作：
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
这是为Rails制作的，但是请参阅下文了解如何修改它以使其独立运行。
您可以独立于Rails使用此方法，方法是编写一个小的Ruby包装器脚本，该脚本与site_settings.rb结合使用，并考虑您的CSS路径，并且您可以在每次要重新生成CSS时调用（例如在网站启动期间）
您几乎可以在任何操作系统上运行Ruby，因此它应该与平台无关。
例如wrapper： generate_CSS.rb （在需要生成CSS时运行此脚本）
#/usr/bin/ruby # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level
CSS_IN_PATH = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' )
Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )然后需要像下面这样修改site_settings.rb中的generate_CSS_files方法：
module Site
# ... see above link for complete contents
# Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
# replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
#
# We will only generate CSS files if they are deleted or the input file is newer / modified
#
def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') ,
output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
# assuming all your CSS files live under "./public/stylesheets"
Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))
# if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
# in this case, we'll need to create the output CSS file fresh:
puts " processing #{filename_in}\n --> generating #{filename_out}"
out_file = File.open( filename_out, 'w' )
File.open( filename_in , 'r' ).each do |line|
if line =~ /^\s*\/\*/ || line =~ /^\s+$/ # ignore empty lines, and lines starting with a comment
out_file.print(line)
next
end
while line =~ /#(\w+)#/ do # substitute all the constants in each line
line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
end
out_file.print(line)
end
out_file.close
end # if ..
end
end # def self.generate_CSS_files
end # module Site当然可以，由于有多个类的精彩世界，它可以做到：
.red {color:red}
.blackBack {background-color: black}但我经常最终还是将它们组合成这样：
.highlight {color:red, background-color: black}我知道语义警察将遍及您，但它确实有效。
如果将css文件作为xsl模板编写，则可以从简单的xml文件读取颜色值。然后使用xslt处理器创建CSS。
colors.xml：
<?xml version="1.0"?>
<colors>
<background>#ccc</background>
</colors>styles.xsl：
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
<xsl:template match="/">body {
background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>渲染CSS的命令： xsltproc -o styles.css styles.xsl colors.xml
styles.css：
body {
background-color: #ccc;
}单靠CSS是不可能的。
您可以使用less.js在JavaScript和LESS上完成此操作，这会将LESS变量实时呈现到CSS中，但这仅用于开发，并且会增加实际使用的开销。
CSS可以提供的最接近的选择是使用属性子字符串选择器，如下所示：
[id*="colvar-"] {
color: #f0c69b;
}并将id所有要调整的元素的s 设置为以开头的名称colvar-，例如colvar-header。然后，当您更改颜色时，所有ID样式都会更新。这与单独使用CSS所能达到的效果非常接近。