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

Question

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

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

score 279 · Accepted Answer

示例 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 变量的原生支持。

score 64 · Accepted Answer

人们一直支持我的回答，但与sass或更少的乐趣相比，这是一个糟糕的解决方案，特别是考虑到这两天易于使用的 gui 的数量。如果您有任何意义，请忽略我在下面建议的所有内容。

您可以在每种颜色之前在 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

score 38 · Accepted Answer

CSS 本身不使用变量。但是，您可以使用另一种语言（如SASS）来使用变量定义样式，并自动生成 CSS 文件，然后您可以将其发布到网络上。请注意，每次更改 CSS 时都必须重新运行生成器，但这并不难。

score 34 · Accepted Answer

34

您可以尝试CSS3 变量：

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

于 2013-05-27T00:50:19.680 回答

score 34 · Accepted Answer

Yeeeaaahhh .... 您现在可以在CSS中使用var( ) 函数.. ...

好消息是您可以使用JavaScript访问对其进行更改，这也将在全局范围内更改...

但是如何声明它们...

这很简单：

比如你想将 a 赋值#ff0000给 a var()，只需简单地赋值 in :root，还要注意--：

:root {
    --red: #ff0000; 
}

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

好在浏览器支持还不错，也不需要编译就可以在浏览器中使用LESS或者SASS...

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

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

score 21 · Accepted Answer

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

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

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

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

score 9 · Accepted Answer

9

CSS 的“少”Ruby Gem 看起来很棒。

http://lesscss.org/

于 2009-12-09T20:00:16.283 回答

score 9 · Accepted Answer

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

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

score 8 · Accepted Answer

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

如果您想要纯 CSS 解决方案，我会执行以下操作。

使用具有语义名称的颜色类。

.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 文件中以根据需要进行更改。

score 4 · Accepted Answer

当然可以，有点，多亏了多类的美妙世界，可以做到这一点：

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

但我经常最终像这样组合它们：

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

我知道语义警察会在你身边，但它有效。

score 3 · Accepted Answer

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

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

当我们想要编程的东西时，为什么不使用编程语言，直到 CSS（也许）支持变量之类的东西？

另外，请查看 Nicole Sullivan 的面向对象的 CSS。

score 3 · Accepted Answer

3

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

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

于 2013-07-02T09:08:24.477 回答

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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 demo

score 2 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

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

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

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

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

例如包装器： 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

score 1 · Accepted Answer

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

Upfront Systems 有一个很好的例子来说明它在 Plone 中的应用。

score 0 · Accepted Answer

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

颜色.xml：

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

样式.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

样式.css：

body {
    background-color: #ccc;
}

score -1 · Accepted Answer

单独使用 CSS 是不可能的。

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

最接近 CSS 的方法是使用属性子字符串选择器，如下所示：

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

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

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

19 回答 19

Related

Reference