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

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


当前回答

没有简单的CSS解决方案。你可以这样做:

在CSS文件中找到background-color和color的所有实例,并为每个独特的颜色创建一个类名。 .top-header {color: #fff;} .content-text {color: #f00;} .bg-leftnav {background-color: #fff;} .bg-column {background-color: #f00;} 接下来,浏览网站上涉及到颜色的每个页面,并为颜色和背景色添加适当的类。 最后,删除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');

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

http://lesscss.org/

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

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

你可以试试CSS3变量:

body {
  --fontColor: red;
  color: var(--fontColor);
}

如果将css文件编写为xsl模板,则可以从简单的xml文件中读取颜色值。然后使用xslt处理器创建css。

colors.xml:

<?xml version="1.0"?>
<colors>
    <background>#ccc</background>
</colors>

styles.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
    <xsl:template match="/">body {
    background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>

渲染css样式的命令:xsltproc -o styles.css styles。xsl colors.xml

styles: css

body {
    background-color: #ccc;
}