By Erik Bakker

LESS module for Play 1.x

Before the year 2011, Lunatech did not employ any frontend developers. We used to build ugly things, like only backend developers can build them. They were stable pieces of software, working fine in most senses, but ugly nonetheless. In january 2011, we hired Egor Kloos, an experienced UX expert. He taught us to make things that aren’t atrocious, and helps us make them into nice things.

One of Egor’s tricks is to use LESS instead of CSS. Now, at that time there was a perfectly fine SASS plugin for the Play Framework 1.x that automatically converted SASS files into CSS, but no such thing for LESS. Egor would not budge and refused to switch from LESS to SASS despite my efforts, so as plan B I set out to improve our tooling and build a LESS plugin for Play 1.×.

Of course, such a tool is useful for many Play developers, and we’ve open sourced it and put it in the Play module repository and on Github.

It is trivial to use, just place your *.less files into the public directory, and they will be automatically processed. For example, create a file called public/stylesheets/style.less, with the following contents:

@color: red;
h1 {
  color: @color;
}

Now, add the stylesheet to your main template in app/views/main.html:

<link type="text/css" rel="stylesheet" href="@{'public/stylesheets/style.less'}" />

And it will work out magically.

Of course, we don’t want to compile the LESS files into CSS at every request, so we do some caching. The less module sets and listens to Last-Modified and ETag headers, so most browsers will retrieve the file only once. At the server, a compiled CSS file is stored in the cache, and automatically invalidated when the less file changes, or when one of the imported files change. So you can change your less files even while Play is running in production mode.

For more information, see Github or the Play module repository.

About me

photo of meHi, my name is Erik Bakker and I'm a software engineer, working mostly with Scala. I'm co-authoring the book Play for Scala. On this page, I blog on software related topics.

Recent posts

Archive

Book

Play for Scala cover imagePlay for Scala is currently in the Manning Early Access Program. You can order and start reading the finished chapters immediately. The first chapter is free!

Contact

I'm @eamelink on Twitter.

You can also find me on GitHub, LinkedIn and Google.