Introducing Less CSS plug-in for Grails

Less CSS is a CSS pre-processor that adds support for many advanced (and lifesaver) features to normal CSS, such as variables, mixins, nested definitions, etc, etc. You basically write .less files that have a syntax similar to CSS itself (with the added functionalities), and these files get compiled as CSS after on. I’ve been wanting to use it for a long time but support for Less in the Groovy/Java ecosystem is scarce. It has originally been developed by the Rails folks. The latest version of Less however has been re-written as pure Javascript. This opens up a full range of possibilities for integrating Less everywhere.

Grails developers, wait no more! I’ve just completed a first draft of an idea that I had this past summer after digging a little bit into the less.js implementation of Less, and this has finally taken the form of a Grails Less plug-in. The basic idea is to offer real-time compilation of Less files when developing your application, and statically compile your Less files as standard CSS when bundling your application for deployment (WAR).

NOTE: Some previous attempt had been made to integrate Less with Grails, but the solution required to pull out the full JRuby stack in order to work correctly. Now that Less has a javascript compiler, we are able to do exactly the same thing but with only Mozilla Rhino as a dependency. Rhino is a library to execute Javascript code directly in the JVM.

By using this new plug-in, you can now use Less transparently in your Grails projects. You first create a .less file in your web-app/css directory, then refer to it (without the file extension) in the HEAD section of your site using the available taglibs:

<less:stylesheet name="your_stylesheet" />
<less:stylesheet name="your_otherstylesheet" />
<less:scripts/>

You may add any number of Less files to your page this way.

When in development mode, .less files will be parsed automatically and directly in the browser. Your changes will be reflected after each page reload.When building your project (using the war command), all your .less files will be compiled to standard CSS files, and the taglib will correctly refer to the static CSS files at runtime.

The plug-in should also play nicely with the ui-performance plug-in: as long as the ui-performance plug-in executes after lesscss, generated CSS files can be minified and bundled by the plug-in.

See the Github page for all the details on installing and using the plug-in.

Advertisements

5 thoughts on “Introducing Less CSS plug-in for Grails

  1. Nice work … I would call my implementation deprecated due to the main project being ported to Node. That’s part of the reason I stopped working on it. I’ll make a note on my original post and direct people who care to your project.

  2. @Johnny great, thanks! If you find anything to contribute back to this new version, you’re more than welcome. Cheers!

  3. Nice work! I was reading through the github readme info and noticed you mentioned that it does work with ui-performance (after a few tweaks). I am wondering if the css sprites functionality in ui-performance would be an issues? To use the sprites functionality, you have to add a special comment after your background-image def to tell it which sprite to use.

  4. Very good question, for which I unfortunately do not have a clear answer 🙂 My first guess is that it would work: the Less compiler preserves standard CSS comments (see docs at http://lesscss.org/).You’re more than welcome to try it out and post your findings here. I’ll add your findings, may they be positive or negative, on the github readme. Thanks!

  5. Hello David, i sent you back friday a pull request in this project of yours..could you take a look and tell me what you think? i have another implementation to the "watch", to use when you want..by passing a parameter in the less:script taglib. Here at decolar.com we were using your plugin, but my boss take it out 😦 😦 😦 because they have had problems with generating war. But in my fork of your project i have changed it to work perfectly and we will continue to use it if the implementation is in the main repositoory(yours)..he is the boss lol… just take a look and tell me what you think. cheers. btw nice work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s