Using SASS, Sprockets, and Compass with Rails 3.1

Using Sprockets in Rails 3.1 can be a little tricky. It wasn’t hard to get Sprockets compiling CSS files from SASS into CSS. However, it became difficult when we wanted to use a compass mixin and put erb assets into our sass files. Here’s what we did to get it to work

1. Install the SASS-Rails gem

Note that this gem is NOT a replacement for SASS just an add-on to help SASS work better with Rails 3.1

2. Update your asset_path and asset_url calls

If you’ve written any sass.erb files in using the <%= asset_path... %> tags they are replaced with asset_path("filename", type) and/or asset_url("filename", type), no longer are wrapped in the <%= %> tag.

body {
  background-image: asset_url("bg.jpg", image);
}

h1 {
  background-image: url(asset_path("h1-background.jpg", image));
}

3. Update your SASS load_path to find compass or other sass based gems you’ve installed with config.sass.load_paths in your application.rb

class Application < Rails::Application
  config.sass.load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"
  config.sass.load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/blueprint/stylesheets"
end

4. Import the compass mixins you want into your application.css.scss file

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
*/

@import "compass/reset";
@import "compass/css3/transition";

@import "layout";
@import "nav";