Using a Django variable in a CSS file

Question

I am trying to create a dynamic CSS file using the Django templating engine or any other means.

Currently, I have a CSS rule that looks like this:

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

Where http://static.example.com corresponds to the STATIC_URL variable in Python. Using the Django templating engine, I could theoretically write something like this:

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

My question is, how can I use the Django templating engine (or any other means) to generate CSS dynamically?

Answer 1

A very good solution here is to use django-compressor. Firstly, if you are serving more than one CSS file, compressor is going to help improve page load times by dropping the number of requests.

A side effect of compressing / concatenating files is that compressor rewrites urls in the css file, so relatively referenced static files (e.g. ../img/logo.png) automatically become fully qualified urls, with the static file url (e.g. http://static.example.com/img/logo.png).

Alternatively you can write custom filters to achieve what you want, or, you can compress your completely static CSS, and some dynamic portions into a single file (for e.g. do this in your base layout file):

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

This also means you don't have to worry about efficiency, as the css/js files are generated on first access of a template which uses them, and they are stored as plain files in your static directory (this is configurable), so they are served as normal, static files.