IE支持CSS变量是否有任何黑客攻击

Question

我正在使用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);
}

Answer 1

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

@themeColor: #323232;
@themeBgColor: #af0069;
.btn {
    background: @themeBgColor;
    color: @themeColor;
}

Answer 2

低调的解决方案，仅适用于以下情况：

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

这将导致您必须在每次迭代中重做此步骤，但将保证网站完全受支持，即使在 Internet Explorer 中也是如此。