django - 使用 LESS/SCSS 的每用户配色方案？

Question

我有一个 Django 项目正在启动，根据用户的学校颜色在许多配色方案中使用 UI 会很棒。我幻想拥有一个基本的 variables.less 文件以及一堆编译成 style.css 的其他 .less 文件。

但是一旦用户设置了他们的学校颜色，它就会生成一个 blue.variables.less 文件(如果他们选择了蓝色预设)或 school123.variables.less 文件(如果他们非常喜欢并使用颜色选择器来制作自己的颜色)方案)，然后将所有内容编译为 blue.style.css 或 school123.style.css，然后这是我们在提供页面时加载的 .css 文件。

我可以想象很多方法让这个失败。就像我将更新推送到 forms.less 或 layout.less 时如何重新处理所有这些文件一样。

有没有更好的方法来做到这一点？我用谷歌搜索我的手指，但没有发现有人尝试这种疯狂。

Answer 1

有很多方法可以实现用户特定配色方案的目标，但它们各有优缺点。

我假设您正在使用一些框架，如 Bootstrap 和您命名的文件。

选项 1:针对特定颜色样式的内联 CSS(首选)

由于性能和简单性，这是我的首选。您可以为每个用户存储每种自定义颜色，甚至可以创建一个模型，以便您可以重复使用代表特定学校的颜色。它存储在数据库中，可以扩展到非常多的配色方案，而不会生成很多非常相似的文件。

创建一个 snippet在具有使用颜色变量的任何样式的模板代码中。

基本文件

{% include "color-snippet.css" with main-color="{{ user's main color }}" alt-color="{{ user's alt color }}" %}

color-snippet.css(注意这个文件将在你的模板目录中，因为它由你的模板引擎处理

<style>
.some-style {
    color: {{ main-color }} !important;
}
</style>

因此，这样做的最大缺点是您需要在 variables.less 之外自定义 Bootstrap。您需要对 less 文件进行 grep 以查找将生成的所有类，并将样式复制到 css 中的代码段中，而不是 less。当您想要升级到较新的 Bootstrap 时，这需要一些前期投资和工作，但它允许您分离样式的颜色部分，以便在运行时动态派生。

我更喜欢这种方法，因为您不必在 collectstatic 步骤之外处理 less 的编译。

选项 2:客户端编译 LESS

您可以让 Django 提供一个动态创建的文件并返回您想要的变量。然后你可以让 less.js 在客户端编译它。

这将涉及向您的基本模板添加一个由 Django 处理的 url 路径，该路径不是您的静态路径的一部分(例如/style/variables)，在 View 中创建一个处理程序，然后返回将是您的 less 文件变量的文本内容.

选项3:LESS的服务器端编译

我用 Django Pipeline做我的服务器端编译less到css。使用 Django 应用程序需要进行一些设置。在开发模式下，Django Pipeline 会根据每个请求将关联的 less 文件编译为 CSS 文件。在生产模式下，它将指向编译文件的适当文件路径。它 Hook 到 collectstatic所以当你 collectstatic 时你的 less 会被编译.

这种方法的最大问题是您的静态文件(更少的 + css 文件编译为 css)的映射是在您的设置文件中定义的。当您更新它时，这需要重新启动服务器。您可以根据 Django Pipeline 的工作原理，在您自己的服务器端进行较少的编译，但具有映射逻辑，而不是在需要重新启动服务器的内容中定义它。

这是很多工作，并且对每个请求都必须进行较少的 Bootstrap 编译。

如果您创建了不需要重新启动 Django 服务器进程的自己的映射，则始终可以运行 collectstatic 来创建新的 css 文件。这将避免在每次请求时编译。

虽然最后一种方法与您提到的最接近，但它似乎比仅分离特定颜色的样式并使用 django 模板对其进行自定义要多得多，而且容易出错。

如果您的方案数量很少，最后一种方法也很有效，因为您可以提前创建所有映射，而不是让人们在运行时生成自己的映射。他们可以提出建议，您可以定期更新它们。