Цветовые схемы для каждого пользователя с LESS / SCSS?

Есть довольно много способов достичь вашей цели, чтобы иметь возможность использовать цветовые схемы, специфичные для пользователя, но каждый из них имеет свои преимущества / недостатки.

Я предполагаю, что вы используете какой-то фреймворк, например Bootstrap, с файлами, которые вы называете.

Вариант 1. Встроенный CSS для цветовых стилей (предпочтительно)

Это мой предпочтительный вариант из-за производительности и простоты. Вы можете сохранить каждый из настроенных цветов для каждого пользователя или даже создать модель, чтобы можно было повторно использовать цвета, представляющие конкретную школу. Он хранится в базе данных и может масштабироваться до очень большого количества цветовых схем без создания множества очень похожих файлов.

Создайте в коде шаблона фрагмент любого стиля, использует цветовую переменную.

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>

Таким образом, большой недостаток этого заключается в том, что вам нужно настроить Bootstrap за пределами переменных .less. Вам нужно будет просмотреть файлы less с помощью команды grep, чтобы найти все классы, которые будут сгенерированы, и скопировать стиль в свой фрагмент в css и не меньше. Если вы захотите перейти на более новую Bootstrap, это потребует определенных вложений и сработает, но это позволит вам отделить цветовую часть стилей, которые будут динамически извлекаться во время выполнения.

Я предпочитаю этот подход, так как вам не нужно иметь дело с компиляцией less за пределами шага collectstatic.

Вариант 2. Компиляция LESS на стороне клиента

Вы можете настроить Django для обслуживания файла, который создается динамически и возвращает нужные вам переменные. Затем вы можете скомпилировать его на клиенте с помощью less.js.

Это будет включать добавление к вашему базовому шаблону URL-адреса, который обрабатывается Django, который не является частью вашего статического пути (например, / style / variables), создание обработчика в представлениях, а затем возврат текстового содержимого, которое будет меньше ваших файловых переменных. .

Вариант 3. Компиляция LESS на стороне сервера

Я использую Django Pipeline, чтобы сделать компиляцию на стороне сервера меньше в css. Для работы с вашим приложением Django требуется некоторая настройка. В режиме разработки Django Pipeline будет компилировать по каждому запросу связанные файлы less в файлы CSS. В производственном режиме он будет указывать на соответствующий путь к скомпилированному файлу. Он подключается к collectstatic, поэтому ваш less компилируется, когда вы collectstatic.

Самая большая проблема с этим подходом заключается в том, что отображение для ваших статических файлов (какие файлы less + css компилируются в css) определяется в вашем файле настроек. При обновлении этого требуется перезапуск сервера. Вы можете основывать свою собственную компиляцию на стороне сервера на том, как работает Django Pipeline, но иметь логику для сопоставления, а не определять ее в том, что требует перезапуска сервера.

Это большая работа, и меньшая компиляция Bootstrap нетривиальна для выполнения каждого запроса.

Если вы создали собственное сопоставление, которое не требует перезапуска серверного процесса Django, вы всегда можете просто запустить collectstatic для создания новых файлов css. Это позволит избежать компиляции при каждом запросе.

Хотя этот последний подход наиболее близок к тому, что вы упомянули, он кажется гораздо более трудоемким и подверженным ошибкам, чем просто разделение стилей для конкретных цветов и использование шаблонов django для их настройки.

Последний подход также хорошо работает, если у вас довольно мало схем, поскольку вы можете просто заранее создать все сопоставления и не позволять людям создавать свои собственные во время выполнения. Они могут их предложить, а вы можете просто обновлять их с определенной частотой.