javascript - 使用JS覆盖LESS css中的全局变量

Question

我在 LESS css 中创建了一个全局变量并为其赋值。我在 CSS 的多个类中使用了该值。我想通过 javascript 动态覆盖该全局变量。

@color: #f938ab;

body {
  font-family: 'Raleway', sans-serif;
  color: @color;
}

我可以使用 JavaScript 代码或类似下面的代码覆盖上面的变量吗？

var color = //color from database;
document.documentElement.style.setProperty('@color', color);

或者CSS中还有其他方法吗？

Answer 1

您需要重新考虑您的方法。

也许您可以将一个类应用到主容器(body？)并根据该类更改您的 css 以应用特定颜色？您可以动态更新此颜色的值。

此外，根据您编译 LESS 文件的位置，您可能会有更多选择。如果您在每个请求时在服务器端编译它(糟糕的方法)并且您也在服务器端读取数据库，那么您可以仅通过更改文件来更改此变量的值。

如果您在客户端生成 CSS(糟糕的方法)，您可能会做类似的事情。

这两种解决方案都非常糟糕且“hacky”，并且会严重影响性能