我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
当前回答
你可以试试CSS3变量:
body {
--fontColor: red;
color: var(--fontColor);
}
其他回答
编辑:这个答案不再是最新的。你现在应该使用CSS变量。
考虑使用SCSS。它与CSS语法完全兼容,因此有效的CSS文件也是有效的SCSS文件。这使得迁移很容易,只需要更改后缀。它有许多增强,最有用的是变量和嵌套选择器。
在将其发送到客户端之前,需要通过预处理器将其转换为CSS。
多年来,我一直是一名铁杆CSS开发人员,但自从强迫自己用SCSS做项目以来,我现在不会使用其他任何东西。
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演示
CSS本身不使用变量。但是,你可以使用另一种语言,比如SASS,用变量来定义你的样式,并自动生成CSS文件,然后你可以把它放在网上。注意,每次对CSS进行更改时都必须重新运行生成器,但这并不难。
当然可以,在某种程度上,感谢多个类的奇妙世界,可以做到这一点:
.red {color:red}
.blackBack {background-color: black}
但我经常把它们组合在一起,就像这样:
.highlight {color:red, background-color: black}
我知道语义警察会盯着你,但这很管用。
我不清楚为什么不能使用PHP。然后,您可以根据需要简单地添加和使用变量,将文件保存为PHP文件,并链接到. PHP文件作为样式表,而不是.css文件。
它不一定是PHP,但你明白我的意思。
当我们需要编程的东西时,为什么不使用编程语言,直到CSS(可能)支持变量之类的东西?
还有,看看Nicole Sullivan的面向对象的CSS。