Question

我正在研究一个很长的CSS文件。我知道客户端可以要求更改配色方案，并且想知道：是否可以为变量指定颜色，以便我可以更改变量以将新颜色应用于使用它的所有元素？

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

Answer 1

CSS使用CSS Variables原生支持此功能。

示例CSS文件

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

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

对于一个工作示例，请参阅this 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变量的原生支持。

Answer 2

人们不断提高我的答案，但与sass或less的快乐相比，这是一个可怕的解决方案，特别是考虑到这些日子易于使用gui's for both的数量。如果您有任何意义，请忽略我在下面建议的所有内容。

你可以在每种颜色之前在css中添加注释，以便作为一种变量，你可以改变使用find / replace的值，所以......

位于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

Answer 3

CSS本身不使用变量。但是，您可以使用其他语言（如SASS）来定义使用变量的样式，并自动生成CSS文件，然后您可以将其放在Web上。请注意，每次对CSS进行更改时都必须重新运行生成器，但这并不难。

Answer 4

您可以尝试CSS3 variables：

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

Answer 5

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

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

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

接下来浏览您网站上涉及颜色的每一页，并为颜色和背景颜色添加适当的类。
最后，除了新创建的颜色类之外，删除CSS中任何颜色的引用。

Answer 6

是的，在不久的将来（我在2012年6月写这篇文章）你可以定义原生的css变量，而不使用less / sass等！ Webkit引擎刚刚实现了第一个css变量规则，因此Chrome和Safari的最新版本已经可以使用它们了。请参阅Official Webkit (Chrome/Safari) development log 并附带现场css浏览器演示。

希望在接下来的几个月内我们可以期待广泛的浏览器支持本机css变量。

Answer 7

用于CSS的'Less'Ruby Gem看起来很棒。

http://lesscss.org/

Answer 8

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

Answer 9

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

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

当我们想要编程时，为什么不使用编程语言，直到CSS（可能）支持变量这样的东西？

另外，请查看Nicole Sullivan的Object-oriented CSS。

Answer 10

dicejs.com (formally 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 demo

Answer 11

您可以通过javascript传递CSS并将COLOUR1的所有实例替换为某种颜色（基本上是正则表达式）并提供备份样式表，最终用户已关闭JS

Answer 12

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

您需要通过预处理器运行它，然后将其转换为CSS，然后再将其发送到客户端。

我多年来一直是一名核心CSS开发人员，但由于强迫自己在SCSS中做一个项目，我现在不会使用其他任何东西了。

Answer 13

由于支持，请勿使用css3变量。

如果你想要一个纯粹的CSS解决方案，我会做以下几点。

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

.bg-primary   { background: #880000; }

.bg-secondary { background: #008800; }

.bg-accent    { background: #F5F5F5; }

将结构与皮肤分开（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 */

将这些内容放在单独的css文件中以根据需要进行更改。

Answer 14

如果你的系统上有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，因此这应该与平台无关。

e.g。包装器： 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

Answer 15

您可以对选择器进行分组：

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

Answer 16

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

Upfront Systems在Plone中使用good example。

Answer 17

由于多个班级的精彩世界，当然可以做到这一点：

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

但我经常最终将它们组合在一起：

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

我知道语义警察将遍布你，但它确实有效。

Answer 18

如果将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;
}

Answer 19

单独使用CSS是不可能的。

你可以使用JavaScript和LESS使用less.js来实现，它会将LESS变量渲染到CSS中，但它仅用于开发，并为实际使用增加了太多开销。

CSS最接近的是使用attribute substring selector这样的：

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

并将要调整的所有元素的id设置为以colvar-开头的名称，例如colvar-header。然后，当您更改颜色时，将更新所有ID样式。这与你单独使用CSS一样接近。

如何在CSS中将颜色定义为变量？

19 个答案: