Working with sass scripts in Grails 2.3.X

Mansi AroraFebruary 27th, 2015Last Updated: February 26th, 2015

0 131 2 minutes read

Sass is one of the most mature, stable, and powerful professional grade CSS extension language available. Before we can use Sass, we need to set it up on our project.

In grails-2.4.X, it is very easy to use sass through asset pipeline plugin. But with grails-2.3.x version, we need to follow these steps:

Step 1

Install Ruby with RVM:

curl -sSL https://get.rvm.io | bash -s stable --rails
source ~/.rvm/scripts/rvm
rvm install ruby-2.1.2
rvm list

In the above commands, we are installing ‘Ruby’ using ‘RVM’.

Step 2

Install Bundle and Compass Gems:

sudo apt-get install gem
gem install bundle
bundle -v
gem install compass

Bundler is the default gem manager for Rails 3, though it can be used with any Ruby project as it has no dependency on framework.

Step 3

Added new file named ‘Gemfile’ under the root folder of your project, with the following contents:

source 'https://rubygems.org'

gem 'compass', '~> 0.13.alpha.0'

group :development do
  gem 'guard'
  gem 'guard-shell'
end

This ensures that all gems specified in Gemfile, together with their dependencies, are available for your application.

Step 4

Inside script folder of your project :

bundle install

Running “bundle install” generates a Gemfile.lock file, which should be added to your git repository. Gemfile.lock ensures that your deployed versions of gems on Heroku match the version installed locally on your development machine.

Step 5

Create a new script file named ‘compass-compile’ under scripts directory with following contents :

#!/bin/sh

STYLE="compact"

if [ $1 ] 
then
	STYLE=$1
fi

cd $2
bundle exec compass compile --force --output-style $STYLE --environment production --css-dir web-app/css --sass-dir src/sass --images-dir web-app/images/

Here, in this script we are compiling ‘sass’ files into ‘css’ files.

Step 6

Create a new _Events.groovy file under scripts directory with following contents :

import grails.util.Environment
eventCompileEnd = {x ->
    if(Environment.currentEnvironment!=Environment.TEST) {
        compileSass()
    }
}


def compileSass() {
    def baseDir = System.getProperty("base.dir")
    def command
    if(baseDir != null) {
        command = """${baseDir}/scripts/compass-compile compact ${baseDir}"""// Create the String
    } else {
        command = """scripts/compass-compile compact ."""// Create the String
    }
    def proc = command.execute()                 // Call *execute* on the string
    proc.waitFor()                               // Wait for the command to finish

    if(proc.exitValue() == 0) {
        def messages = proc.in.text.split("\n")
        messages.each { message ->
            event("StatusUpdate",[message])
        }
    } else {
        event("StatusError", ["Problem compiling SASS ${proc.err.text}"])
    }
}

When we run our grails application, ‘compileSass()’ function is called. This function compiles our ‘sass’ files into ‘css’ files using the script specified in Step 5.

Step 7

Add your sass files under ‘src/sass’ directory. The above script converts all the sass files under “src/sass” directory into css files, and copies them into wep-app/css directory.