css - 从 JSON 文件或 typescript 文件定义 CSS 变量的方法？

Question

我想像在 Sass 中一样定义 CSS 变量。 像这样的东西:

.someClass {
  background-image: $imageLink;
  color: $someColor;
}

我想在我的类或 json 文件中定义 $imageLink 和 $someColor。

我可以在没有 Sass 或 Less 的情况下做到这一点吗？ (或者没有 css 变量，因为它在 IE 中不支持。)

我在我的元素中使用 angular2 和 webpack。

Answer 1

当然你不能在运行时设置 SASS 变量，因为那时 SASS 已经编译好了。

一个经典的方法是从“主题”的 Angular 来思考，并通过更高级别元素(例如主体)上的类来选择主题。所以你可以有

.darktheme  .someClass { color: white; }
.lighttheme .someClass { color: black; }

现在您可以从您的 JS 更改主题

document.body.classList.add('darktheme');