Saturday, March 2, 2013

Compiling less files through apache module - mod_less





As front end application grow in demand, new technologies emerge. One of them is support for dynamic stylesheets on web - lesscss, or saas. Both languages give you creativity in expressing your style through usage of mixins, inheritance, etc..

What I want to cover here is acutall development process. Since there's no native browser support or these (nor there is hint there will be in near future), you have to compile your css yourself, either client-side via Javascript, or server-side. Problem with client-side compilers can be cross-browser support and big overhead for mobile devices. For server side, you can compile *.less files to *.css files via nodejs and it's less module:

$ lessc styles.less > styles.css
Pretty boring, if you have to do this EVERY time you change your less source, right? So, there is project on github that solves this problem in form of apache module. Though project is in very early stage (latest commit as a year ago - in 2012), it's quite usable. One thing author forgot to mention, and what you'll probably get your self if examining the source, is that module just passes request to nodejs and lessc command-line utitlies to perform process fo compilation (there's no real in-module processing), so this module serves as a gateway between browser and nodejs compiler. Also, it caches compiled files on filesystem and updates them if modificaiton date of less source is greater than already existing source. Not really smart, considering, that output can change if one of the files references through @import directive changes, and in this case you'll be stuck with stale version of the file.

There is couple of improvements that can be done module, like:

  • Optional caching
  • Handling @import directives, and listening for updates to files via inotify
  • Configurable location of compiled css files. The way it is now it only creates mess on filesystem.
  • In-memory caching of compiled stylesheets
Overall, nice module for some simple development using lesscss language, and lots of space for improvement.