是否有/什么是在我的 CSS 样式表中设置跨浏览器兼容的变量的最佳方法？
我要设置
color: #123456;
变成一个变量，因为我在许多不同的地方使用它，如果我选择改变那个颜色，我希望它全部改变。
【问题讨论】：
标签： css
CSS Variables are a thing 但目前唯一支持它的浏览器是 Mozilla。
备选方案：
关于最后一个，而不是将颜色硬编码到元素样式中：
<div class="thisElement"></div>
.thisElement {
font-size: 13px
background: red;
color: #123456;
}
考虑为此实例使用类：
<div class="thisElement color1"></div>
.thisElement {
font-size: 13px
background: red;
}
.color1 {
color: #123456;
}
这样您只需要在样式表中声明一次颜色。这本质上是“object oriented CSS”。这个想法是，不是为每个 DOM 对象应用单一的样式声明，而是将样式的“sn-ps”声明给一堆单独的类，然后将这些单独的类分配给你认为合适的每个 DOM 对象。
从某种意义上说，您已经将类名本身变成了变量。您在 CSS 中声明一次，然后在 HTML 中根据需要多次使用它。
【讨论】：
如果您想在本机 css 中执行此操作，则不能。但是，您可以使用 SASS / LESS 等技术/预处理器来准确实现您所描述的内容。
跨浏览器兼容性、变量和计算。
一旦你习惯了语法（这真的很容易理解和修改）并且你准备好了，SASS 就会为你创建“普通”的 css 文件。让您的代码保持干净、简单且易于维护。
看看这个： http://sass-lang.com/
另外，here 你可以找到一些示例和 sn-ps 以获得第一印象。
【讨论】：
它没有得到很好的支持，但这就是它的工作方式 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 这样的预处理器，它做得更好。
【讨论】：