Javascript 使用JS在较少的css中重写全局变量

我用更少的css创建了一个全局变量，并给它赋值。我在CSS的多个类中使用了该值。我想通过javascript动态重写这个全局变量

@color:#f938ab；
身体{
字体系列：“Raleway”，无衬线；
颜色：@颜色；
}

我可以使用JavaScript代码或类似下面的代码重写上述变量吗

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

---

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

您需要重新考虑您的方法

也许您可以将一个类应用于主容器（

body

？），并根据该类更改css以应用特定的颜色？您可能会动态更新此颜色的值

此外，根据编译较少文件的位置，您可能有更多的选项。如果您在每个请求上都在服务器端编译它（糟糕的方法），并且您也在服务器端读取DB，那么您可以通过更改文件来更改此变量的值

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

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

修改变量 启用对较少变量的运行时修改。使用新值调用时，将重新编译较少的文件，而无需重新加载。简单的基本用法：

这假设您在客户端使用较少，否则您将需要为每种颜色创建一个css类，并使用javascript进行切换。

---

但最后一种解决方案只有在您有一个特定的可能颜色列表时才可行，因为十六进制句柄16 777 216不同。

最好的方法是在主体上添加动态类，并根据主体上添加的类更改@color的值，然后将LESS编译为css

@color: #f938ab;

body.class1{
@color: color1;
}

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

---

并使用javascript在body上添加类。

您不能在JS中修改CSS预处理器变量。您试图做的是不可能的。我使用了：root css，但IE浏览器不支持它。任何其他更改@color value dynamically的方法您只能通过设置样式来覆盖cssjs@AllanRaquin我被纠正了，但要做到这一点，您需要在客户端上运行更少的代码，这几乎破坏了使用CSS预编译器的所有好处

@color: #f938ab;

body.class1{
@color: color1;
}

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