Using SASS/SCSS In Grails

Posted by David Estes on Jan 21, 2014

Recently I completed the public release of the sass-asset-pipeline for Grails. This plugin brings the widely popular SASS/SCSS, and Compass stylesheet language into the Grails world. Granted, there were a few plugins that made this available to grails before, although it required a lot more work to use, or you could just have used the compass watch . style means of compiling your sass into css.

With this new plugin, we've tried to make it as easy as possible for developers to integrate SASS/SCSS into their grails applications. As a result, by default, all files in the grails-app/assets/** folder tree that end with the extension scss will automaticall get compiled on the fly into css. These files will also get precompiled into css on war creation, so we don't incur the overhead of jRuby and Compass in production.

Some of you may be wondering why jRuby had to be involved here. Well, first off, Compass and SASS compilers are written entirely in Ruby, and translating these compilers to Groovy would make for a maintenance nightmare just keeping up with the ruby equivalents. So, thanks to jRuby (running as a dependency) we can load these compilers into our jvm and compile SASS/SCSS on the fly.

What's so Great about SASS/SCSS

SCSS really helps with reducing redundant syntax when creating your stylesheets. They actually have a lot of similarities with LESS. Both support, mixins and variables, both support nested css queries i.e.:

.btn {
  line-height:20px;
  .btn-primary {
    background: #006699;
  }
}

Would get translated to:

.btn {
  line-height:20px;
}
.btn .btn-primary {
  background: #006699;
}

Thats just scratching the surface. For more on using SASS/SCSS check out the sass website at http://sass-lang.com/.

Compass

Compass is a full-on css authoring framework, that adds helpful mixins and sprite generation to your projects. This is what is powering the sass-asset-pipeline and gives you full use of the framework. Not only can we use mixins that generate cross browser css gradients, rounded borders, and much much more.

Feel free to give this plugin a try, and submit any feedback you have to the github issues page.