less_is_more /

Filename Size Date modified Message
dist
less_is_more
tests
21 B
146 B
1.1 KB
171 B
2.1 KB
309 B

Update: This project will be deprecated soon in favor of something shiny to handle the JIT/multitenant stuff that plays nicely with Django compressor.


LESS is MORE

A LESS CSS tag for Django. I built it to scratch my own itch because of issues with Django-Compressor. It returns any syntax errors to the template level for easy debugging.

There's no support for storage backends yet, but it's on my list.

It uses Python 2.7's subprocesses module and Django 1.4's template tag library. Obviously you need to be to be that up to date.

{% load less_tags %}
<style type="text/css">
    @import url({% less "foo/bar/myfile.less" %});
</style>
  1. Takes what's in STATIC_ROOT/foo/bar/myfile.less
  2. Generates MEDIA_ROOT/css/foo.bar.myfile.less.1335721730.32.css if it doesn't exist (where that number is the origin less file's modified timestamp in epoch.)
  3. And returns "MEDIA_URL/css/foo.bar.myfile.less.1335721730.32.css"

To make it work, you need a LESS Compiler.

  • For Windows, there's also https://github.com/duncansmart/less.js-windows, but honestly the inconsistency isn't worth not installing Node.js.
  • For everything else, get node.js and "npm install less" to the place you want to put the compiler (and any other node modules).

And then in your Django project settings, you can set the location of the compiler and output to override the defaults.

LESS_TOOLS_SETTINGS = {
    'compiler': 'somedir/node_modules/less/bin/lessc',
    'output_dir': 'css/', # goes inside MEDIA_ROOT
}

My settings look like this (I'm keeping node_modules inside the repo for easy portability between environments. Not sure if that's a good idea or not.)

LESS_TOOLS_SETTINGS = {
    'compiler': '%sbin/node_modules/less/bin/lessc' % PROJECT_ROOT,
    'is_multitenant': True, # If you set this, it gets requets.STATIC_ROOT instead of settings.STATIC_ROOT
}

And of course, you need to put 'less_is_more' in your INSTALLED_APPS.

Feel free to ping me with issues or questions.

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.