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

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 5 年前。

我实际上正在尝试使用 ASP MVC 制作一个网络应用程序以支持一些动态颜色设置。例如，管理员可以为特定用户组设置主题颜色。当管理员保存新的颜色代码时，这些新的颜色代码需要保存在 CSS 中。因此，用户登录后，他们会根据他们的组看到不同的颜色。

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

所以我的问题是...

如何从 SASS 或 LESS 文件中检索变量并为变量设置新值？有图书馆吗？我检查了 BundleTransformer 和 dotless。但我仍然不知道这些库是否支持处理变量。
如果我可以更新 SASS 或 LESS 中的变量，它会根据任何更改进行编译吗？我可以为客户端的缓存 CSS 做什么？
如果你们能给我更好的或其他方法，我将不胜感激。

谢谢，

最佳答案

如果您只针对使用现代浏览器的用户，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 的 CSS var() documentation .

关于css - 在运行时更改 SASS 或 LESS 变量值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50011825/

相关文章：

html - div 的高度不会改变 CSS