Compile LESS files into CSS files

HowTo compile LESS files into CSS files

During development

This is documented in the Getting started: Frontend.

You can add less.js then less.watch to the base.html of the project.

...
<script type="text/javascript" src="{% static 'js/less.js' %}"></script>
...
{# Trigger less.watch() #}
<script>
    $(function() {
        less.watch();
    });
</script>
...

Alternatively, you can just go put less.watch() in your browser`s console.

Use the lessc compiler

Install lesscss

For an example, let's compile the Perseus LESS files.

Just go to /kalite/distributed/static/perseus/stylesheets/exercise-content-package/ and run

$ lessc perseus.less > perseus.css

or, if you are at the kalite folder;

$ lessc distributed/static/perseus/stylesheets/exercise-content-package/perseus.less > distributed/static/perseus/stylesheets/exercise-content-package/perseus.css

to generate the perseus.css file.

Using PyCharm 3.x

1. Use the CSS LESS Compiler Plugin plugin which will watch .css on your projects and automatically compile them.

2. Or enable the LESS watcher of PyCharm 3.x which will do the same for each .less file you edit.

   However, the LESS watcher may or may not work properly.

   Example: The widgets/image.less is imported by the perseus.less file and must be compiled on its own but included on the resulting perseus.css. With the LESS watcher enabled, you may get a "compile error because the @baseFontFamily is undefined" error.