Compiling LESS CSS

The build script can now optionally compile your LESS code into CSS ready for use on a production site. Currently the script will only work on LESS code in your main stylesheet, so if you want to process more than one stylesheet you must use @import references in this file.

To enable the LESS compiler, in project.properties your must set file.root.stylesheet to the name of your LESS stylesheet and build.css.less to true.

Example project.properties

...
file.root.stylesheet = style.less
build.css.less = true
...

Now when you run ant your LESS code will be compiled, and as it replaces the main stylesheet your code will also be minified and have a new hashed filename.

Tidying up LESS references in your HTML

To make the build script remove references to your LESS JavaScript from your HTML wrap it in a comment block like so.

<!-- less script -->
  <script>var less = { env: ‘development’ };</script>
  <script src="js/vendor/less-1.3.0.min.js"></script>
<!-- end less script -->

The build script will also change the rel attribute of your main stylesheet link to stylesheet from stylesheet/less.