我正在处理一个很长的 CSS 文件。我知道客户可能会要求更改配色方案,并且想知道:是否可以将颜色分配给变量,这样我就可以只更改一个变量,将新颜色应用到所有使用它的元素?
请注意,我无法使用 PHP 动态更改 CSS 文件。
最佳答案
CSS 原生支持 CSS Variables .
示例 CSS 文件
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}
有关工作示例,请参阅 this JSFiddle (该示例显示 fiddle 中的一个 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 变量的原生支持。
关于css - 如何在 CSS 中将颜色定义为变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45260957/