Groovy

Working with sass scripts in Grails 2.3.X

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.

  • I have also created a demo-app for the same.

Hope it helps!

Mansi Arora

Mansi has more than 2 years of experience in Grails and Groovy. She always looks for perfection in her work which is accompanied by her sharp, acute and intellectual knowledge. She is very benevolent person and can be characterized by quickness and ease in learning. You can check her more blogs here.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button