我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
当前回答
你可以通过javascript传递CSS,用特定的颜色替换所有的color1实例(基本上是regex它),并提供一个备份样式表,以防最终用户关闭JS
其他回答
恐怕不是PHP,而是Zope和Plone使用类似于SASS的DTML来实现这一点。它在CMS中非常有用。
Upfront Systems在Plone中有一个很好的例子。
当然可以,在某种程度上,感谢多个类的奇妙世界,可以做到这一点:
.red {color:red}
.blackBack {background-color: black}
但我经常把它们组合在一起,就像这样:
.highlight {color:red, background-color: black}
我知道语义警察会盯着你,但这很管用。
仅靠CSS是不可能实现的。
你可以使用JavaScript,也可以使用LESS .js,这将把LESS变量实时呈现到CSS中,但它仅用于开发,并且为实际使用增加了太多的开销。
你可以使用CSS最接近的是使用属性子字符串选择器,像这样:
[id*="colvar-"] {
color: #f0c69b;
}
并设置您想要调整为以colvar-开头的名称的所有元素的id,例如colvar-header。然后,当您更改颜色时,所有ID样式都会更新。这是你单独使用CSS所能达到的效果。
CSS通过CSS变量支持这一点。
CSS文件示例
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}
关于工作示例,请参阅这个JSFiddle(该示例显示了小提琴中的一个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文件编写为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;
}