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

Posted

技术标签:

【中文标题】如何在 CSS 中将颜色定义为变量？【英文标题】：How can I define colors as variables in CSS? 【发布时间】：2010-12-24 22:54:13 【问题描述】：

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

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

【问题讨论】：

可能重复... ***.com/questions/47487/… w3.org/People/Bos/CSS-variables 这可能会有所帮助：***.com/questions/15831657/… 【参考方案1】：

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

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

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

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

【讨论】：

【参考方案2】：

Yeeeaaaahhh....您现在可以在 CSS.....

中使用 var() 函数

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

但是如何声明它们...

很简单：

比如你想给var()赋值一个#ff0000，直接赋值给:root，还要注意--：

:root 
    --red: #ff0000; 


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

好在浏览器支持还不错，也不需要像LESS或SASS这样的浏览器编译使用...

另外，这里有一个简单的 javascript 脚本，它将红色值更改为蓝色：

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

【讨论】：

感谢浏览器图片。解释为什么我的 IE 用户群看不到我的颜色。【参考方案3】：

你可以试试CSS3 variables:

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

【讨论】：

注意：自定义属性前缀在早期规范中是 var-，但后来改为 --。 Firefox 31 及更高版本遵循新规范。 （错误 985838）developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables【参考方案4】：

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

【讨论】：

以防万一其他人读到这篇文章并试图让它在 Safari 中运行 - 对 CSS 的支持似乎已在 2013 年春夏从 Webkit 中删除。bugs.webkit.org/show_bug.cgi?id=114119 lists.webkit.org/pipermail/webkit-dev/2013-April/024476.html 在 Chrome 中仍然有效启用上述标志后。 在 chrome 36 上测试，即使启用了标志也无法正常工作。虽然仍然适用于 firefox 刚刚用 Chrome 版本 49.0.2623.110 m 查了一下，还是不行。 你的操作系统是什么？它对我有用：Mac OS X 上的版本 49.0.2623.110（64 位） 也适用于我的 android 的 Chrome 版本 Android 5.1.0 Chrome 49.0.2623.105【参考方案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 中除新创建的颜色类之外的所有颜色引用。

【讨论】：

但是如果客户决定他们想让所有的红色元素都变成绿色怎么办？您必须更改“红色”类以提供“颜色：绿色”，这会变得混乱且难以维护。 @singingwolfboy，我应该更具体地说明类的命名。最容易引用它们所属的元素，以便您将来轻松修改它们。 @downvoters，这是一个 CSS ONLY 解决方案。有很多涉及脚本或 CLI 的替代解决方案，这适用于不打算这样做的人。【参考方案6】：

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

Upfront Systems 在 Plone 中有一个 good example。

【讨论】：

【参考方案7】：

由于支持，请勿使用 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 文件中，以便根据需要进行更改。

【讨论】：

【参考方案8】：

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

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

【讨论】：

添加 cmets 在少数情况下不起作用，例如在使用 IE 过滤器时。我不能把 cmets 放在这里 -> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f5619', endColorstr='#77842f',GradientType=0 ); /* IE6-9 */ 投反对票，因为你是对的，这是一个糟糕的解决方案。 我个人更喜欢你的客户端回答风格而不是服务器端解决方案，所以我做了一些事情来做。这并不令人惊讶，但它可以工作***.com/a/44936706/4808079 不接受您的回答。如果您认为它很糟糕，您可以随时删除它。 投反对票，因为使用预处理器构建 CSS 是一个不必要的、可怕的想法。【参考方案9】：

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

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

但我经常会这样组合它们：

.highlight color:red, background-color: black

我知道语义警察会控制你，但它确实有效。

【讨论】：

我要补充一点：使用不同且更具语义的名称。如果品牌颜色发生变化，您将重做大量 html 代码。使用 .primary、.secondary、.accent 等类名。【参考方案10】：

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

【讨论】：

【参考方案11】：

单独使用 CSS 是不可能的。

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

最接近 CSS 的方法是使用 attribute substring selector，如下所示：

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

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

【讨论】：

我只使用 CSS，它使用 css 变量 Mozilla-example 如果您的所有用户都在使用 mozilla，那就太好了——祝您好运 也适用于 chrome、safari 和 Opera。 pmsl OP 在我的帖子中对高中语法的挑剔是怎么回事？还不错。【参考方案12】：

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

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

【讨论】：

【参考方案13】：

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

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

【讨论】：

@Daniel Make that 2015 嗨。 2020 年了，3% 的浏览器仍然不支持它……IE 很棒，不是吗？【参考方案14】：

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

【讨论】：

这个工具似乎在 2014 年不再可用【参考方案15】：

如果你的系统上有 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，因此这应该是完全独立于平台的。

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

【讨论】：

【参考方案16】：

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

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

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

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

【讨论】：

我们不能都使用 PHP，因为这项工作要求我们中的一些人不要这样做！【参考方案17】：

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

【讨论】：

【参考方案18】：

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

http://lesscss.org/

【讨论】：

我认为 LESS 的美妙之处在于它不是 Ruby 或任何特定于框架的。它可以在客户端“编译”或与任何其他框架一起使用，例如 django-css github.com/dziegler/django-css 或其他东西【参考方案19】：

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

【讨论】：

我认为现在（2016 年）的答案不正确，不是吗？虽然我认为使用 SASS 等可能会更好。 使用 CSS 变量可能比 SASS 更可取，因为使用 SASS 颜色只能静态更改。使用 CSS vars 可以在运行时更改颜色，即您可以使用 javascript 使用按钮切换到“暗模式”。

以上是关于如何在 CSS 中将颜色定义为变量？的主要内容，如果未能解决你的问题，请参考以下文章

如何在与 webpack 捆绑时将 SASS 变量转换为原生 CSS 变量？

如何在 Less 中将两个变量连接为选择器

如何在 css 文件中使用 API 颜色变量？

如何在 TextView Android 中将渐变设置为文本颜色以及在其周围添加描边？

如何在 Grafana 仪表板中将显示名称设置为自定义变量？

如何将不透明度应用于 CSS 颜色变量？