I wrote a long post a week back about struggling to get Grunt.js (generated by Yeoman) to work with Compass, Compass plugins like Susy, and Bundler.

Since then, I’ve been asking better questions. And wanted to walk other developers through a simpler, less-well documented process.

My goals are the same as before:

1. Use Sass/Compass with plugins like Susy and Breakpoint (Ruby Gems).
2. Maintain locally scoped version control over those plugins to avoid version conflicts

Last time I went through the process of hooking up Grunt to an external Ruby file to setup Compass and use Bundler (for version control). This can be simplified and make your life much easier.

1. Start by creating a new empty project directory and new Yeoman project:

yo

I use often use angular:

yo angular

2. Select ‘Y’ for would you like to use Sass (with Compass)? Select ‘Y’ if you want to use Twitter Bootstrap, and Sass version. Let Yeoman build your project.

Unlike in the previous tutorial, I’m letting Grunt handle Compass and SCSS compiling with the grunt-contrib-compass (built into the Yeoman generator).

3. Navigate to your Gruntfile.js file. Edit your Compass Options (Yeoman will add a lot of configuration).

Below

raw: ‘Sass::Script::Number.precision = 10\n’,

Add the following:

bundleExec: ‘true’,
require: [‘susy’,’breakpoint’]

There are two options for grunt-contrib-compass. BundleExec tells Compass to use Bundler to locally scope your ruby gems (your Compass plugins). ‘Require’ tells Compass which gems (like Susy’ or Breakpoint) you want to use.

4. The last step is to add a Gemfile to your root directory. This is a file used by Bundler to figure out what versions of Compass plugins you want. Mine looks like this:

source ‘https://rubygems.org'

# Susy Two Configuration with Breakpoints
gem ‘sass’, ‘~>3.3.8'
gem ‘compass’, ‘~>1.0.0.alpha.19'
gem ‘breakpoint’, ‘~>2.4.2'
gem ‘susy’, ‘~>2.1.2'

You are ready to roll, no config.rb file needed to configure Compass, grunt-contrib-compass takes care of that for you. When Grunt runs the Compass process, it will run, and localy scope your Compass plugins.

bundle exec compass compile

If this helped at all, let me know @nicholasdynan