{"id":37558,"date":"2015-02-27T22:00:31","date_gmt":"2015-02-27T20:00:31","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=37558"},"modified":"2015-02-26T08:41:04","modified_gmt":"2015-02-26T06:41:04","slug":"working-with-sass-scripts-in-grails-2-3-x","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2015\/02\/working-with-sass-scripts-in-grails-2-3-x.html","title":{"rendered":"Working with sass scripts in Grails 2.3.X"},"content":{"rendered":"

Sass<\/a> 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.<\/p>\n

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:<\/p>\n

Step 1<\/h2>\n

Install Ruby with RVM<\/a>:
\n 
\n <\/p>\n

curl -sSL https:\/\/get.rvm.io | bash -s stable --rails\r\nsource ~\/.rvm\/scripts\/rvm\r\nrvm install ruby-2.1.2\r\nrvm list\r\n<\/pre>\n
In the above commands, we are installing ‘Ruby’ using ‘RVM’.<\/p>\n
Step 2<\/h2>\n
Install Bundle and Compass Gems:<\/p>\n
sudo apt-get install gem\r\ngem install bundle\r\nbundle -v\r\ngem install compass\r\n<\/pre>\n
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.<\/p>\n
Step 3<\/h2>\n
Added new file named ‘Gemfile’ under the root folder of your project, with the following contents:
 
<\/div> <\/div><\/p>\n
source 'https:\/\/rubygems.org'\r\n\r\ngem 'compass', '~> 0.13.alpha.0'\r\n\r\ngroup :development do\r\n  gem 'guard'\r\n  gem 'guard-shell'\r\nend\r\n<\/pre>\n
This ensures that all gems specified in Gemfile, together with their dependencies, are available for your application.<\/p>\n
Step 4<\/h2>\n
Inside script folder of your project :<\/p>\n
bundle install<\/pre>\n
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.<\/p>\n
Step 5<\/h2>\n
Create a new script file named ‘compass-compile’ under scripts directory with following contents :<\/p>\n
#!\/bin\/sh\r\n\r\nSTYLE=\"compact\"\r\n\r\nif [ $1 ] \r\nthen\r\n\tSTYLE=$1\r\nfi\r\n\r\ncd $2\r\nbundle exec compass compile --force --output-style $STYLE --environment production --css-dir web-app\/css --sass-dir src\/sass --images-dir web-app\/images\/\r\n<\/pre>\n
Here, in this script we are compiling ‘sass’ files into ‘css’ files.<\/p>\n
Step 6<\/h2>\n
Create a new _Events.groovy file under scripts directory with following contents :<\/p>\n
import grails.util.Environment\r\neventCompileEnd = {x ->\r\n    if(Environment.currentEnvironment!=Environment.TEST) {\r\n        compileSass()\r\n    }\r\n}\r\n\r\n\r\ndef compileSass() {\r\n    def baseDir = System.getProperty(\"base.dir\")\r\n    def command\r\n    if(baseDir != null) {\r\n        command = \"\"\"${baseDir}\/scripts\/compass-compile compact ${baseDir}\"\"\"\/\/ Create the String\r\n    } else {\r\n        command = \"\"\"scripts\/compass-compile compact .\"\"\"\/\/ Create the String\r\n    }\r\n    def proc = command.execute()                 \/\/ Call *execute* on the string\r\n    proc.waitFor()                               \/\/ Wait for the command to finish\r\n\r\n    if(proc.exitValue() == 0) {\r\n        def messages = proc.in.text.split(\"\\n\")\r\n        messages.each { message ->\r\n            event(\"StatusUpdate\",[message])\r\n        }\r\n    } else {\r\n        event(\"StatusError\", [\"Problem compiling SASS ${proc.err.text}\"])\r\n    }\r\n}\r\n<\/pre>\n
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.<\/p>\n
Step 7<\/h2>\n
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.<\/p>\n