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!