Nepal on Rails

millisami's rants!

Revisited: Rails 3.1.x With Compass, Sass and Twitter-bootstrap Using the Asset Pipeline

This is a revised post for the previously released post Rails3.1 with compass, sass and twitter-bootstrap using the asset pipeline It had problems while compiling the assets via rake assets:compile

Here I’ll show you 2 alternative ways to get Compass, SASS(.sass) and Twitter bootstrap installed and compiled in a Rails 3.1.3(latest on as of writing this).

1. Using anjlab-bootstrap-rails

Add the necessary gems in the Gemfile.

group :assets do
  ...
  gem compass, :git => https://github.com/chriseppstein/compass.git, :tag => v0.12.alpha.2
  gem sass-rails, "  ~> 3.1.0"
  gem anjlab-bootstrap-rails, :require => bootstrap-rails,
                                  :git => git://github.com/anjlab/bootstrap-rails.git,
                                  :ref => eab5c9e3db95
end

Rename the app/assets/stylesheets/application.css file to app/assets/stylesheets/application.css.scss and replace the commented manifest with below.

@import "bootstrap";
@import "compass/css3";
@import "base";

The above imports all the stylesheets of Bootstrap, Compass’s CSS3 mixins and our own base.sass files.

The following is the sample base.sass file using compass/css3 mixins.

a
  outline: 0
object, embed
  outline: 0
input::-moz-focus-inner
  border: 0

div#main
  +box-shadow(red 2px 2px 10px)

We can use all the compass cross-browser compatible awesome mixins.

2. Using compass_twitter_bootstrap

Add the necessary gems in the Gemfile.

group :assets do
  ...
  gem compass, :git => https://github.com/chriseppstein/compass.git, :tag => v0.12.alpha.2
  gem sass-rails, "  ~> 3.1.0"
  gem compass-twitter-bootstrap, :git => git://github.com/vwall/compass-twitter-bootstrap.git,
                                :ref => b6f9b467bc

end

Add a file at config/initializers/sass.rb with the following:

Rails.configuration.sass.tap do |config|
  # twitter bootstrap
  config.load_paths << Compass::Frameworks[compass].stylesheets_directory
  config.load_paths << Compass::Frameworks[twitter_bootstrap].stylesheets_directory
end

Rename the app/assets/stylesheets/application.css file to app/assets/stylesheets/application.css.scss and replace the commented manifest with below.

@import "compass_twitter_bootstrap"
@import "compass/css3";
@import "base";

Verifying the assets:compile task

Well, if the bootstrap with compass works in development mode doesn’t mean that it will compile the assets properly. To verify it, the rake assets:compile task should run successfully both in development and production environment.

So, to verify this, just run

RAILS_ENV=development bundle exec rake assets:compile
RAILS_ENV=production bundle exec rake assets:compile

This should create compressed assets at public/assets directory.

Hope you find it useful.