使用十六进制颜色的变量

Question

使用HTML / CSS / JavaScript，有没有办法使用变量来控制十六进制颜色值，所以我可以这样说：color #variable1, variable2, variable3，abc，例如变量1 2和3是1 ，2和3，因此颜色代码为#123abc。

我想我要问的是，如果有意义的话，你是否可以使用变量来代替颜色的标识符。谢谢！

Answer 1

自定义属性定义变量，使用var（）表示法引用，可用于多种用途。例如，在设计中始终使用一小组颜色的页面可以将颜色存储在自定义属性中，并将它们与变量一起使用：

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

HTML

  <h1 id="foo">Hello</hi>

输出将导致＆＃34; Hello＆＃34;是＃06c，如上所定义。

请参阅Custom Properties for Cascading Variables

Answer 2

不，你在CSS中描述的内容是不可能的。但是可以将颜色存储在javascript变量中并动态更改值。

编辑正如其他人所指出的那样，某些浏览器的最新版本现在支持变量。话虽如此，如果您需要支持任何旧浏览器，我建议使用Less或Sass。

var color1 = "#123abc";
var myElement = document.querySelector("#myDiv");
myDiv.style.backgroundColor = color1;

Answer 3

你不能真正在CSS中使用变量来表示颜色。您可以使用预处理器之类的Sass或Less来执行您想要的操作。

编辑如其他答案所述，您可以在CSS中使用变量。此功能非常新，仅适用于超现代的新浏览器。因此，使用上述预处理器仍然有好处，因为它与浏览器更兼容，因为它只是转换为标准CSS。

Answer 4

另一个未提及的选项，如果你使用PHP，就是使用这样的PHP变量：

<?php $color = '333444'; ?>
<style type="text/css">
    .class {
        color: #<?php $color; ?>;
    }
</style>

当您从php服务器代码生成整个样式（出于任何目的）时，最好使用它。

$color = '333444';

echo "
    <style>
        .class {
            color: #$color;
        }
    </style>
";

除此之外，只要知道你可以做到这一点，但这不是最好的解决方案。让我们等到CSS4或5，他们可能会在那里添加变量。