我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案，并想知道:是否可以将颜色分配给变量，这样我就可以更改一个变量，使新颜色应用于所有使用它的元素?
请注意，我不能使用PHP动态更改CSS文件。
当前回答
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');
其他回答
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演示
由于支持，不要使用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.
CSS的“少”Ruby宝石看起来棒极了。
http://lesscss.org/
你可以对选择器进行分组:
#selector1, #selector2, #selector3 { color: black; }
CSS本身不使用变量。但是，你可以使用另一种语言，比如SASS，用变量来定义你的样式，并自动生成CSS文件，然后你可以把它放在网上。注意，每次对CSS进行更改时都必须重新运行生成器，但这并不难。
