我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?

请注意,我不能使用PHP动态更改CSS文件。


当前回答

恐怕不是PHP,而是Zope和Plone使用类似于SASS的DTML来实现这一点。它在CMS中非常有用。

Upfront Systems在Plone中有一个很好的例子。

其他回答

我不清楚为什么不能使用PHP。然后,您可以根据需要简单地添加和使用变量,将文件保存为PHP文件,并链接到. PHP文件作为样式表,而不是.css文件。

它不一定是PHP,但你明白我的意思。

当我们需要编程的东西时,为什么不使用编程语言,直到CSS(可能)支持变量之类的东西?

还有,看看Nicole Sullivan的面向对象的CSS。

你可以通过javascript传递CSS,用特定的颜色替换所有的color1实例(基本上是regex它),并提供一个备份样式表,以防最终用户关闭JS

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');

CSS的“少”Ruby宝石看起来棒极了。

http://lesscss.org/

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演示