javascript - 为十六进制颜色使用变量

Question

使用 HTML/CSS/JavaScript，有没有办法使用变量来控制十六进制颜色值，所以我可以这样说:color #variable1, variable2, variable3, a b c, and for示例变量 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>

输出将导致“Hello”为 #06c，如上定义。

参见 Custom Properties for Cascading Variables