IE 对 CSS 变量的支持有什么技巧吗？ [复制]答案

【问题标题】：Is there any hack for IE support of CSS Variable? [duplicate]IE 对 CSS 变量的支持有什么技巧吗？ [复制]
【发布时间】：2017-10-16 10:15:48
【问题描述】：

我将 CSS 变量用于主题颜色和主题背景，但我的代码在 IE 上不起作用。 IE 对 CSS 变量的支持有什么技巧吗？

/* Declaring variable*/
:root {
  --theme-color: #323232;
  --theme-bg-color: #af0069;
}

/* Using variable */
.btn {
  background: var(--theme-bg-color);
  color: var(--theme-color);
}

【问题讨论】：

不。最好的选择是使用 Sass 或导入后备样式表。
@Roberrrt 我正在开发一个仅基于 JavaScript、HTML 和 CSS 的离线项目，其中我无法添加任何 SASS 支持:(

标签： css css-variables

【解决方案1】：

仅在这种情况下可用的低调解决方案：

完成您的项目，然后复制您的 CSS 文件，查找并替换您所有的 var(--theme-bg-color); 与可敬的颜色：#323232;。

这将导致您必须在每次迭代中重新执行此步骤，但可以保证网站得到完全支持，即使在 Internet Explorer 中也是如此。

【讨论】：

那var的有什么用呢？
开发过程中的一致性。
CSS 中变量的整个概念是一致性。最终用户一开始就不会看到使用的任何优势，因此在开发阶段坚持使用此解决方案将产生最佳结果。（此外，OP 要求对变量进行“hacky 修复”，而“find-and-replace”解决方案绝对是“hacky”。
太好了@Roberrrt，但这正是我不想做的。
替代方案是 Sass。但我非常理解你为什么不想这样做。

【解决方案2】：

IE 不支持变量。但是您可以使用 CSS 预处理器，例如 LESS 或 SASS。

@themeColor: #323232;
@themeBgColor: #af0069;

.btn {
    background: @themeBgColor;
    color: @themeColor;
}

【讨论】：

OP 表示他不能使用 Sass
我正在开发一个仅基于 JavaScript、HTML 和 CSS 的离线项目，其中我无法添加任何 LESS 或 SASS 支持:(
@Roberrrt 这不是问题。
它是在您回答时添加到评论中的，是的。再说一次，这将是最简单的解决方案。