django + less setup

While working on the front-end for hyperkitty, I was running into a lot of repetitive css. Now, I don’t mind being a bit quick and dirty just to get things working quickly, but for long-term maintanance I thought it would be better to look into some stylesheet languages. Since hyperkitty is using Bootstrap, I naturally looked towards LESS. LESS has features like variables, extension, and nested rules, which makes CSS stylesheets look much more readable (and will hopefully mean it’ll be easier to maintain moving forward).

To get LESS working with hyperkitty’s development setup, I had to make the following changes to my dev setup.

Within the virtual environment, I installed additional django modules:

pip install django-compressor
pip install django-less

I added a couple of lines to setting_local.py:

INSTALLED_APPS = (
    # other apps
    'compressor',
    'less',
)
STATICFILES_FINDERS = (
    # other finders..
    'compressor.finders.CompressorFinder',
    'less.finders.LessFinder',
)
COMPRESS_PRECOMPILERS = (
   ('text/less', 'lessc {infile} {outfile}'),
)
INTERNAL_IPS = ('127.0.0.1',)

To install lessc, I ran:

sudo yum install nodejs npm
npm install less

Inside hyperkitty-base.html I added these lines within the head section:

{% if debug %} 
<link rel="stylesheet/less" type="text/css" media="all" href="{{ STATIC_URL }}hyperkitty/less/hyperkitty.less" />
{% else %}
{% compress css %}
<link rel="stylesheet" type="text/less" media="all" href="{{ STATIC_URL }}hyperkitty/less/hyperkitty.less" />
{% endcompress %}
{% endif %}

And at the end of hyperkitty-base.html, I added a reference to the less javascript file:

{% if debug %}
<script src="{{ STATIC_URL }}hyperkitty/libs/less/less-1.6.3.min.js"></script>
{% endif %}

With this setup, we’re compiling LESS files locally only when we’re in development mode, but when we’re in production mode, we compress the LESS files into CSS and use that.