在CSS中使用变量

Question

在我的CSS样式表中设置一个跨浏览器兼容的变量的最佳方法是什么？

我想设置

color: #123456;

变成一个变量，因为我在很多不同的地方使用它，如果我选择改变那种颜色，我想要改变它。

Answer 1

CSS Variables are a thing但是目前唯一支持它的浏览器是Mozilla。

备选方案：

• 使用Javascript和/或服务器端语言以编程方式在CSS文件中设置变量。
• 使用像SASS这样的CSS预处理器。这允许您创建变量。您每次都必须重新部署CSS。
• 考虑在标记中以不同的方式处理颜色。

关于最后一个，而不是将颜色硬编码为元素样式：

<div class="thisElement"></div>

.thisElement {
    font-size: 13px
    background: red;
    color: #123456;
}

考虑为这个instea使用类：

<div class="thisElement color1"></div>

.thisElement {
    font-size: 13px
    background: red;
}

.color1 {
    color: #123456;
}

这样你只需要在样式表中声明一次颜色。这基本上是“object oriented CSS”。我们的想法是，不是为每个DOM对象应用单片样式声明，而是将样式的“片段”声明为一堆单独的类，然后根据您认为适合每个DOM对象的那些单独的类进行分配。

从某种意义上说，你已经将类名本身转变为变量。您只需在CSS中声明一次，然后在HTML中根据需要多次使用它。

Answer 2

它没有得到很好的支持，但这是它的工作原理 http://www.w3.org/TR/css-variables/

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

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

/* The rest of the CSS file */

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

你可以使用像SASS这样的预处理器，它可以做得更好。