01 May 2013

When working with the Play Framework, you have the choice to run develop your CSS in LESS, for which it has build-in support, or Sass, for which you'll have to install a plugin.

The basic compiling of Sass is handled quite well by this plugin, but it takes some time to figure out how to configure it well.

First of all you have to add compass support by appending this line to your Build.scala:

.settings( SassPlugin.sassOptions := Seq("--compass","-r", "compass") )

This already helps quite a lot, but I really had trouble finding how to configure the settings for e.g. images_dir. It is possible to add options to the above Sequence, but it doesn't work for images_dir.

What happened to be the problem, is that it is not taking compass options, as I'm used to, but "raw" Sass options, i.e. what you'll get if you type "sass" on the command line, in contrast to typing "compass".

It is possible to add certain parameters, e.g. adding -g:

.settings( SassPlugin.sassOptions := Seq("--compass","-r", "compass","-g") )

This will succesfully add FireSass debugging.

The "--compass" parameter will actually look for a config.rb, where more advanced settings can be configured, but you can't specify its path. After some more investigating I found that it works if you put a config.rb in the root of the Play project, with this content:

http_path = "/"
images_dir = "assets/images"

Now, it will be able to resolve to the images in /public/images when you use image-url() in your Sass stylesheets.