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"

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";

  • Zoga says:

    Awesome! Just what I was looking for!


    • Dustin Tinney Dustin Tinney says:

      Zoga: some of this information might be out of date. With the full release of rails 3.1 I believe the SASS settings are no longer needed. Also the url helper may have changed.

      • Vadim says:

        url helper wasn’t changed(at least it’s working as expected). Dunno about SASS settings(I’m not using them in 3.1 and everything looks fine)

  • Noah says:

    I was having a tough time getting compass to work in Rails 3.1 (after reading several other forums and posts) until I added the load_paths in your directions to application.rb. Thanks a bunch!

  • Comments are closed.