在运行时更改SASS或LESS变量值

Question

我实际上是在尝试使用ASP MVC创建一个Web应用程序来支持一些动态颜色设置。例如，admin可以为特定用户组设置主题颜色。当admin保存新的颜色代码时，这些新的颜色代码需要保存在CSS中。因此，如果用户登录，他们将根据他们的群组看到不同的颜色。

为此，我正在考虑使用SASS或LESS。如果我可以在“保存”操作中轻松地将SASS或LESS中的变量设置为新的颜色代码。

所以我的问题是......

1. 如何从SASS或LESS文件中检索变量并为变量设置新值？有这个图书馆吗？我检查过BundleTransformer并且无点。但我仍然不知道这些库是否支持处理变量。

2. 如果我可以更新SASS或LESS中的变量，是否会在任何更改时编译？ 我能为客户端的缓存CSS做些什么？

3. 如果你们能给我更好或其他方法，我真的很感激。

谢谢，

Answer 1

如果您仅定位使用现代浏览器的用户，则CSS具有实验变量支持（请参阅Can I use..数据）。这是来自MDN的一个例子：

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

如果你采用这种方法，你只需要将颜色变量插入到一个简单的样式表中，CSS将完成其余的工作：

<style>
:root {
  --group-colour: {{ groupColour }}
}
</style>
<link rel="stylesheet" href="/path/to/stylesheet/with/variables.css">

有关CSS变量的更多信息，请参阅MDN＆＃39; CSS var() documentation。