Nepal on Rails

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.

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.