Django で LESS を使う

インストール

まずは、 node.js と lessc をインストール。ぐぬぬ。

$ brew install node
$ npm install -g less

$ which lessc
/usr/local/bin/lessc

$ lessc
lessc: no input files

usage: lessc [option option=parameter ...] <source> [destination]
...

インストールできました!

PyCharmで Watcher 編 (オススメ)

PyCharm を使われている方は、自動コンパイルを簡単にすることができるのでオススメです。

まず、拡張子 .less のファイルを作ります。

そうすると、自動で 「ファイルウォッチャーに登録する? 」と聞いてきますので、すかさず Add watcher します。

すると、Less のウオッチャー登録のウインドウが現れます。

先ほどインストールした lessc を認識していますので、このまま OK をクリック。

これでウォッチャーが動作してますので、less を編集し、保存すると自動で css をビルドします。簡単!

↑ 表示上は階層構造に見えますが、同一ディレクトリに CSS が自動で作られます。

Django compresser でオンライン変換編

$ pip install django-compressor

INSTALLED_APPS に compressor を追加

参考のため、Django oscar の HTML ファイルを見てみると

layout.html

    {% compress css %}
      {% if use_less %}
        <link rel="stylesheet" type="text/less" href="{% static "oscar/less/styles.less" %}" />
      {% else %}
        <link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />
      {% endif %}
    {% endcompress %}

こうなっています。 use_less は、settings.USE_LESS がそのまま使われます。

このような状態で、settings で

settings.py

COMPRESS_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'compressfiles')

USE_LESS = True

COMPRESS_ENABLED = True

COMPRESS_PRECOMPILERS = (
    ('text/less', 'lessc {infile} {outfile}'),
)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder'
)

こう設定すると、compless css ブロック内の less をまとめて ビルドしてくれます。

PyCharm でウォッチする場合と同様、ビルドされるのを意識しなくて良いためこれも便利です。

参考: Settings — Django Compressor 1.6 documentation

Django compresser のマネジメントコマンドでオフライン変換編

マネジメントコマンドでコンパイルする場合は、上記設定に加えて

settings.py

COMPRESS_OFFLINE = True

COMPRESS_OFFLINE_CONTEXT = {
    'STATIC_URL': STATIC_URL,
    'use_less': USE_LESS,
}

この追加設定を加えます。これで、

$ ./manage.py compress

で less のコンパイルを行うようになります。

参考: How to change Oscar’s appearance — django-oscar 1.1 documentation