我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
当前回答
当然可以,在某种程度上,感谢多个类的奇妙世界,可以做到这一点:
.red {color:red}
.blackBack {background-color: black}
但我经常把它们组合在一起,就像这样:
.highlight {color:red, background-color: black}
我知道语义警察会盯着你,但这很管用。
其他回答
没有简单的CSS解决方案。你可以这样做:
在CSS文件中找到background-color和color的所有实例,并为每个独特的颜色创建一个类名。 .top-header {color: #fff;} .content-text {color: #f00;} .bg-leftnav {background-color: #fff;} .bg-column {background-color: #f00;} 接下来,浏览网站上涉及到颜色的每个页面,并为颜色和背景色添加适当的类。 最后,删除CSS中除了新创建的颜色类之外的任何颜色引用。
是的,在不久的将来(我在2012年6月写了这篇文章)你可以定义原生css变量,而不需要使用更少的/sass等!Webkit引擎刚刚实现了第一个css变量规则,所以Chrome和Safari的前沿版本已经可以使用它们了。查看官方Webkit (Chrome/Safari)开发日志和现场css浏览器演示。
希望在接下来的几个月里,我们可以看到浏览器对原生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');
你可以对选择器进行分组:
#selector1, #selector2, #selector3 { color: black; }
编辑:这个答案不再是最新的。你现在应该使用CSS变量。
考虑使用SCSS。它与CSS语法完全兼容,因此有效的CSS文件也是有效的SCSS文件。这使得迁移很容易,只需要更改后缀。它有许多增强,最有用的是变量和嵌套选择器。
在将其发送到客户端之前,需要通过预处理器将其转换为CSS。
多年来,我一直是一名铁杆CSS开发人员,但自从强迫自己用SCSS做项目以来,我现在不会使用其他任何东西。