Использование переменной Django в файле CSS

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

В настоящее время у меня есть правило CSS, которое выглядит так:

background-image: url('http://static.example.com/example.png');

Где http://static.example.com соответствует переменной STATIC_URL в Python. Используя механизм шаблонов Django, я мог бы теоретически написать что-то вроде этого:

background-image: url('{{ STATIC_URL }}example.png');

Мой вопрос: как я могу использовать механизм шаблонов Django (или любые другие средства) для динамического генерации CSS?

ОТВЕТЫ

Ответ 1

В основном у вас есть два варианта:

  • Поддерживайте свой CSS динамически, используя запись в urls.py и т.д., как если бы это была страница HTML. Ваш шаблонный файл будет просто CSS вместо HTML, но будет использовать обычный синтаксис шаблона Django и т.д.

  • Ярлык. Ссылка на фоновое изображение с относительным путем. Это может быть или не быть возможно для вашей среды, но это удобный способ иметь статический файл CSS с ссылками на разные пути в зависимости от того, где он размещен.

Ответ 2

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

Побочным эффектом сжатия/конкатенации файлов является то, что компрессор перезаписывает URL-адреса в файле css, поэтому относительно статические файлы с ссылкой (например../img/logo.png) автоматически становятся полностью квалифицированными URL-адресами со статическим URL-адресом файла (например, http://static.example.com/img/logo.png).

В качестве альтернативы вы можете создавать собственные фильтры для достижения того, чего хотите, или вы можете сжать полностью статичный CSS и некоторые динамические части в один файл (например, сделать это в вашем файле макета):

{% compress css %}
   <link .... />
   <style>
       .some_rule {background-image:{{MEDIA_URL}}/img/logo.png}
   </style>
{% endcompress %}

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