需要动态CSS样式

Question

我有一个创建网站的平台;

客户可以通过更改字体，颜色等许多定义来自定义其网站外观;

该应用程序基于：Python和React

目前我有这样的dynamic.css文件：

.highlights {
  background-color: {{ request.personalize.color.highlights }};
}

但它很不错。

如何实现更易于使用的功能？像dynamic_variables.scss之类的东西，或类似的东西，我可以设置：

$highlight: {{ request.personalize.color.highlights }}

然后在我的样式表中使用它：

.highlights {
  color: $highlight;
}

提前致谢。

Answer 1

您可以在客户端使用JavaScript创建样式表。基本上，您将创建一个Style元素，使用CSS项填充它，并将其添加到文档头。以下是一篇文章，其中包含一些编码方法：How to dynamically create CSS class in JavaScript and apply?

您还可以构建样式块服务器端并将其添加到那里的文档头。