每个用户使用LESS / SCSS的配色方案?

科林

我有一个Django项目,在该项目中,可以根据用户的学校颜色在UI中使用多种配色方案。我幻想有一个基本的variables.less文件以及一堆编译成style.css的其他.less文件。

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

我可以想象有很多方法可以解决这个问题。就像当我将更新推送到Forms.less或layout.less时如何重新处理所有这些文件。

有一个更好的方法吗?我用裸露的谷歌搜索,但没有发现任何尝试这种疯狂的人。

蒂姆·埃德加

有多种方法可以实现具有特定于用户的颜色方案的目标,但是每种方法都有其优点/缺点。

我假设您正在使用诸如Bootstrap之类的框架来处理您命名的文件。

选项1:内联CSS,用于特定颜色的样式(首选)

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

在您的模板代码中创建一个代码段代码段具有使用color变量的任何样式。

base.html

{% 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。您需要grep浏览较少的文件,以查找将要生成的所有类,然后将样式复制到css中的代码段中,而不要少一些。要升级到较新的Bootstrap时,需要先进行一些投资并投入使用,但是它允许您分隔样式的颜色部分,以在运行时动态派生。

我更喜欢这种方法,因为您不必在Collectstatic步骤之外处理更少的内容。

选项2:LESS的客户端编译

您可以让Django提供动态创建的文件并返回所需的变量。然后,您可以让less.js在客户端上对其进行编译。

这将涉及将不属于您的静态路径(例如/ style / variables)的,由Django处理的url路径添加到您的基本模板中,在视图中创建一个处理程序,然后返回将是您的较少文件变量的文本内容。

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

我使用Django Pipeline进行不到CSS的服务器端编译。需要一些设置才能使用Django应用程序。在开发模式下,Django Pipeline将根据每个请求将较少的相关文件编译为CSS文件。在生产模式下,它将指向已编译文件的适当文件路径。它钩住了collectstatic你的更少的东西collectstatic

这种方法的最大问题是,静态文件(少+ css文件编译为css)的映射是在设置文件中定义的。当您更新此服务器时,这需要重新启动服务器。您可以根据Django Pipeline的工作原理,减少服务器端的编译工作,但可以使用映射逻辑,而不必在需要重新启动服务器的情况下对其进行定义。

繁琐的工作量以及对Bootstrap的较少编译对于每个请求而言都是不平凡的。

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

尽管这最后一种方法最接近您所提到的方法,但似乎不仅要分离特定于颜色的样式并使用django模板对其进行自定义,还需要做更多的工作和出错。

如果您的方案数量很少,则最后一种方法也可以很好地工作,因为您可以提前创建所有映射,而不能让人们在运行时生成自己的映射。他们可以建议他们,您可以按常规节奏对其进行更新。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用不同的配色方案

Plink 使用 PuTTY 配色方案

锥体:更改每个壳的配色方案?

如何根据用户更改提示的配色方案?

对多个配色表使用!important可以实现不同的配色方案

Altair:对选定的列使用可变的配色方案

在vim和腻子中使用配色方案

如何使用yadr安装配色方案

如何使Qt Creator使用KDE配色方案

在Kate中使用gedit的“ Oblivion”配色方案

使用JavaScript生成随机的网站配色方案

LESS / Joomla T3中复杂的配色方案定义

在Sublime文本中为每个文件记住了配色方案

使用plotly绘制线图时定义配色方案

如何使用React使Web应用程序配色方案可变?

使用tmux时ssh破坏vim配色方案

使用Javascript日期设置活动类以设置配色方案?

Wordpress - 使用 functions.php 添加新的管理配色方案

如何为Geany添加和使用配色方案?

防止Firefox使用gnome主题的网站配色方案

如何为VIm使用或转换GVIm配色方案?

如何为柔和的配色方案提供易于使用的高对比度替代方案?

将配色方案 JSON 列表添加到 Angular 8 环境中的 Scss 文件

如何使用ggplot2更改堆积条形图的顺序和配色方案?

如何导出Ubuntu终端的配色方案以在其他计算机上使用?

使用tmux时,VIM日晒配色方案看起来错误

在VS代码上使用鼠尾草时,如何获得python配色方案?

使用Spree和Spree Fancy如何自定义配色方案?

如何使用Sass变量值声明sass变量以创建配色方案?