If you’re using the fresh new prerelease of Ruby on Rails (version 3.1.0.rc4 in this article), and if you’re a user of the wonderful Compass stylesheet framework, you may have been at the same time amazed of the integration of SASS into Rails, and puzzled by the way it seems to violate the compass approach.

Here is how to re-enable Compass, and the SASS syntax for your projects in Rails 3.1, it’s not very hard:

First, in your Gemfile, add:
gem 'compass', git: 'https://github.com/chriseppstein/compass.git',
  branch: 'rails31'


And don’t forget to execute a

bundle update

Then, in config/application.rb:
config.generators.stylesheet_engine = :sass


Rename application.css.scss to application.css.sass, and replace its contents by:

@import compass
@import _blueprint


(If you want to keep the new Rails 3.1 manifest code at the beginning of the stylesheet, you’ll have to replace the ‘/* */’ comments by the sass-syntax version ‘//’ at the beginning of each line)

Now, to test if compass and blueprint mixins work, add some code to the same file application.css.sass:

@import compass
@import _blueprint
body
  background: black
  +linear-gradient(color-stops(white, black))
  +column(5)


Run your rails server with
bundle exec rails server

Load your app in a browser, and visit http://localhost:3000/assets/application.css

If everything went well, you should see the compiled code:
/* line 5, /home/daniel/apps/deleteme-3.1/app/assets/stylesheets/application.css.sass */
body {
  background: black;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));
  background-image: -webkit-linear-gradient(top, #ffffff, #000000);
  background-image: -moz-linear-gradient(top, #ffffff, #000000);
  background-image: -o-linear-gradient(top, #ffffff, #000000);
  background-image: -ms-linear-gradient(top, #ffffff, #000000);
  background-image: linear-gradient(top, #ffffff, #000000);
  display: inline;
  float: left;
  margin-right: 10px;
  width: 190px;
}
/* line 147, /home/daniel/.rvm/gems/ruby-1.9.2-p180/bundler/gems/compass-2124003550bf/frameworks/blueprint/stylesheets/blueprint/_grid.scss */
* html body {
  overflow-x: hidden;
}