我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改CSS文件。
我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,并想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于所有使用它的元素?
请注意,我不能使用PHP动态更改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');
其他回答
我不清楚为什么不能使用PHP。然后,您可以根据需要简单地添加和使用变量,将文件保存为PHP文件,并链接到. PHP文件作为样式表,而不是.css文件。
它不一定是PHP,但你明白我的意思。
当我们需要编程的东西时,为什么不使用编程语言,直到CSS(可能)支持变量之类的东西?
还有,看看Nicole Sullivan的面向对象的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变量支持。
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/
如果将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;
}