Compile LESS files into CSS files

HowTo compile LESS files into CSS files

During development

This is documented in the /docs/FRONTEND.md file.

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 lessjs 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

Just install the CSS LESS Compiler Plugin plugin which will watch .css on your projects and automatically compile them. The good thing is that it will compile into one .css file including mixins.

I advise against enabling the LESS watcher of PyCharm 3.x because it will compile all .less files you have changed. This will include the mixins which must be compiled into the main .less file.

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