Compiling LESS CSS

dom2503 edited this page May 7, 2012 · 3 revisions

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 your must set file.root.stylesheet to the name of your LESS stylesheet and build.css.less to true.


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.