Using #lesscss with #playframework 2.0

LESSCSS is a tool using variables, mixins and other goodness to produce CSS.
In LESSCSS, stylesheets are concise and easier to maintain.

Twitter bootstrap CSS
The Twitter bootstrap is a stylesheet written in LESS. It is a very good basis to start writing HTML applications.

Playframework 2.0
#playframework 2.0 is a web framework written in scala with java API.
Its stateless and asynchronous core helps writing scalable web applications.
More information on Please note that the version 2.0 is not ready for production yet.

Using LESSCSS with play 2.0
In a Play 2.0 application, copy the LESS files from twitter bootstrap in app / assets / stylesheets.
By default, Play tries to compile all LESS files found in this folder.
This cannot work with the LESS files from twitter bootstrap. Only the main bootstrap.less file that includes the other ones should be compiled.

For this, change the configuration in project / Build.scala:
val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
lessEntryPoints <<= baseDirectory(_ / "app" / "assets" / "stylesheets" ** "bootstrap.less")

The LESS compiler will now produces two files: bootstrap.css and the minified version bootstrap.min.css
You can now use this CSS like this:
<link rel="stylesheet" href=""stylesheets/bootstrap.css")">

Let's make a change in a LESS file. For example, change a color in variables.less.
Reload the page in the browser and, in dev mode, you can see your change in the CSS file.
No need to restart, everything is compiled on the fly whenever a file is modified.

Responsive design
With twitter bootstrap, you can also use a responsive design. The layout changes according to the dimension of the browser window, which let use the same website for browsers on desktops, tablets and mobile devices.

For that, we need to compile 2 files: bootstrap.less and responsive.less with the following Build.scala:
val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
lessEntryPoints <<= (sourceDirectory in Compile)(base => (
(base / "assets" / "stylesheets" / "bootstrap.less") +++
(base / "assets" / "stylesheets" / "responsive.less")

The 2 produced CSS files can now be used. In Production mode, it is even better to include the minified versions like this:

@minified=@{ if (play.Play.isProd()) ".min" else "" }
<link rel="stylesheet" href=""stylesheets/bootstrap"+ minified + ".css")">
<link rel="stylesheet" href=""stylesheets/responsive"+ minified + ".css")">

LESSCSS is well integrated in #playframework .
In developement, the changes are immediately applied.
In Production, the minified version is optimal.
Shared publiclyView activity