17 10 / 2011

Rails3.1 with compass, sass and twitter-bootstrap using the asset pipeline

I prefer the sass original syntax over the new scss. And I don’t want to loose the awesome CSS3 mixins. When you google, you’ll find many articles and almost all have different hacks to implement. But as of today, those load paths hacks are not necessary when I tried to use the compass and twitter-bootstrap.

Add the necessary gems in the Gemfile.

group :assets do
  ...
  gem 'compass', git: 'https://github.com/chriseppstein/compass.git'
  gem 'sass-rails', "  ~> 3.1.0"
  gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                                :git => 'git://github.com/anjlab/bootstrap-rails.git'
end

Rename the app/assets/stylesheets/application.css file to app/assets/stylesheets/application.sass and change the commented manifest from:

/*
 * 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
 *= require_tree . 
*/

to sass comment style

// * 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
// *= require_tree .
// *= require bootstrap

Now do import of compass css3 mixins the sass way in the same application.sass file or other files.

@import "compass/css3/opacity"

#logo h1
  +opacity(0.5)

Thats it.