我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案，并想知道:是否可以将颜色分配给变量，这样我就可以更改一个变量，使新颜色应用于所有使用它的元素?
请注意，我不能使用PHP动态更改CSS文件。
当前回答
编辑:这个答案不再是最新的。你现在应该使用CSS变量。
考虑使用SCSS。它与CSS语法完全兼容，因此有效的CSS文件也是有效的SCSS文件。这使得迁移很容易，只需要更改后缀。它有许多增强，最有用的是变量和嵌套选择器。
在将其发送到客户端之前，需要通过预处理器将其转换为CSS。
多年来，我一直是一名铁杆CSS开发人员，但自从强迫自己用SCSS做项目以来，我现在不会使用其他任何东西。
其他回答
仅靠CSS是不可能实现的。
你可以使用JavaScript，也可以使用LESS .js，这将把LESS变量实时呈现到CSS中，但它仅用于开发，并且为实际使用增加了太多的开销。
你可以使用CSS最接近的是使用属性子字符串选择器，像这样:
[id*="colvar-"] {
color: #f0c69b;
}
并设置您想要调整为以colvar-开头的名称的所有元素的id，例如colvar-header。然后，当您更改颜色时，所有ID样式都会更新。这是你单独使用CSS所能达到的效果。
CSS的“少”Ruby宝石看起来棒极了。
http://lesscss.org/
Yeeeaaahhh……你现在可以在CSS.....中使用var()函数
好消息是你可以使用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');
你可以对选择器进行分组:
#selector1, #selector2, #selector3 { color: black; }
由于支持，不要使用css3变量。
如果你想要一个纯css解决方案，我会做以下事情。
Use color classes with semenatic names. .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.
