如何在CSS中定义颜色作为变量?

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

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

283851 次浏览
小开

CSS本身不使用变量。然而，你可以使用另一种语言，如萨斯，来使用变量定义你的样式，并自动生成CSS文件，然后你可以把它放在网上。注意，每次对CSS进行更改时都必须重新运行生成器，但这并不难。

小开

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

  • 在CSS文件中找到background-color和color的所有实例，并为每种独特的颜色创建一个类名。

    .top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }

  • Next go through every single page on your site where color was involved and add the appropriate classes for both color and background color.

  • Last, remove any references of colors in your CSS other than your newly created color classes.

小开

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

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

小开

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

< a href = " http://lesscss.org/ " rel = " noreferrer > http://lesscss.org/ < / >

小开

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

小开

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

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

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

还有，看看妮可·沙利文的面向对象的CSS。

小开

人们不断投票我的答案，但这是一个可怕的解决方案相比的喜悦sass或少，特别是考虑到数量易于使用gui's均这些天。如果你还有理智，就忽略我下面的建议吧。

你可以在css中每个颜色之前放一个注释，作为一种变量，你可以使用查找/替换来改变它的值，所以…

在css文件的顶部

/********************* Colour reference chart****************
*************************** comment ********* colour ********


box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456


*/

后面的CSS文件

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

然后，例如，改变框文本的配色方案，你做一个查找/替换

/*bt*/#123456
小开

如果你的系统上有Ruby，你可以这样做:

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

这是为Rails制作的，但请参阅下面如何修改它以独立运行。

你可以通过编写一个小的Ruby包装器脚本来独立于Rails使用这个方法 它与site_settings一起工作。rb，并将css路径考虑在内 你可以调用每次你想重新生成你的CSS(例如在网站启动期间)

您可以在几乎任何操作系统上运行Ruby，因此这应该是相当独立于平台的。

例如wrapper: generate_CSS.rb(当你需要生成CSS时运行这个脚本)

#/usr/bin/ruby  # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level


CSS_IN_PATH  = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' )


Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )

site_settings.rb中的generate_CSS_files方法需要像这样修改:

module Site
#   ... see above link for complete contents


# Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
# replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
#
# We will only generate CSS files if they are deleted or the input file is newer / modified
#
def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') ,
output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
# assuming all your CSS files live under "./public/stylesheets"
Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))


# if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
# in this case, we'll need to create the output CSS file fresh:
puts " processing #{filename_in}\n --> generating #{filename_out}"


out_file = File.open( filename_out, 'w' )
File.open( filename_in , 'r' ).each do |line|
if line =~ /^\s*\/\*/ || line =~ /^\s+$/             # ignore empty lines, and lines starting with a comment
out_file.print(line)
next
end
while  line =~ /#(\w+)#/  do                         # substitute all the constants in each line
line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
end
out_file.print(line)
end
out_file.close
end # if ..
end
end # def self.generate_CSS_files


end # module Site
小开

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

小开

是的，在不久的将来(我在2012年6月写了这篇文章)你可以定义原生css变量，而不需要使用更少的/sass等!Webkit引擎刚刚实现了第一个css变量规则，所以Chrome和Safari的前沿版本已经可以使用它们了。查看官方Webkit (Chrome/Safari)开发日志现场css浏览器演示。

希望在接下来的几个月里，我们可以看到浏览器对原生css变量的广泛支持。

小开

编辑:这个答案不再是最新的。你现在应该使用CSS变量。

考虑使用SCSS。它与CSS语法完全兼容，因此有效的CSS文件也是有效的SCSS文件。这使得迁移很容易，只需要更改后缀。它有许多增强，最有用的是变量和嵌套选择器。

在将其发送到客户端之前，需要通过预处理器将其转换为CSS。

多年来，我一直是一名铁杆CSS开发人员，但自从强迫自己用SCSS做项目以来，我现在不会使用其他任何东西。

小开

你可以尝试CSS3变量:

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

你可以对选择器进行分组:

#selector1, #selector2, #selector3 { color: black; }
小开

CSS通过CSS变量原生支持这一点。

CSS文件示例

:root {
--main-color:#06c;
}


#foo {
color: var(--main-color);
}

有关工作示例，请参见这JSFiddle(该示例显示了fiddle中的一个CSS选择器将颜色硬编码为蓝色，另一个CSS选择器使用原始和当前语法的CSS变量将颜色设置为蓝色)。

在JavaScript/客户端操作CSS变量

document.body.style.setProperty('--main-color',"#6c0")

所有现代浏览器都支持

Firefox 31 +， Chrome 49 +， Safari 9.1 +， Microsoft Edge 15+和歌剧36 +自带CSS变量支持。

小开

仅靠CSS是不可能实现的。

你可以使用JavaScript和少使用less.js来实现，这将把LESS变量实时呈现到CSS中，但它仅用于开发，并且为实际使用增加了太多的开销。

使用CSS最接近的方法是像这样使用属性子字符串选择器:

[id*="colvar-"] {
color: #f0c69b;
}

并设置你想要调整的所有元素的__abc0为以colvar-开头的名称，例如colvar-header。然后，当您更改颜色时，所有ID样式都会更新。这是你单独使用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;
}
小开

当然可以，在某种程度上，感谢多个类的奇妙世界，可以做到这一点:

.red {color:red}
.blackBack {background-color: black}

但我经常把它们组合在一起，就像这样:

.highlight {color:red, background-color: black}

我知道语义警察会盯着你，但这很管用。

小开

由于支持，不要使用css3变量。

如果你想要一个纯css解决方案，我会做以下事情。

  1. 使用带有semenatic名称的颜色类。

    .bg-primary   { background: #880000; }


.bg-secondary { background: #008800; }


.bg-accent    { background: #F5F5F5; }

  2. Separate the structure from the skin (OOCSS)

    /* Instead of */


h1 {
font-size: 2rem;
line-height: 1.5rem;
color: #8000;
}


/* use this */


h1 {
font-size: 2rem;
line-height: 1.5rem;
}


.bg-primary {
background: #880000;
}


/* This will allow you to reuse colors in your design */

  3. Put these inside a separate css file to change as needed.

小开

Yeeeaaahhh……你现在可以在CSS。中使用var ()函数…

好消息是你可以使用JavaScript访问来改变它，这也会在全局范围内改变…

但是如何申报呢?

这很简单:

例如，你想要将#ff0000赋值给var()，只需在:root中赋值，还要注意--:

:root {
--red: #ff0000;
}


html, body {
background-color: var(--red);
}

好的方面是浏览器支持不差，也不需要像LESS或SASS那样编译才能在浏览器中使用…

browser support

另外，这是一个简单的JavaScript脚本，它将红色值更改为蓝色:

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');

提交答案