Using Twitter Bootstrap with Rails 3.1 and SASS

Twitter’s Bootstrap is a pretty awesome toolkit to kickstart your next web app. But it uses Less. And that’s unfortunate for the Rails community as Sass (SCSS) is pretty much defacto now.

So what should we do if we want to use Bootstrap in a Rails 3.1 project, and make it co-exist with Sass?

Here’s how I do it.

1) Add Less to your Gemfile.

2) Submodule Bootstrap into your assets/stylesheets folder.

3) Create a bootstrap.less in assets/stylesheets to import the Bootstrap stylesheets you need.

4) Add that bootstrap.less to your application.css.

As for Sass files, I keep my main SCSS file (where I do all my @imports) in sass_main.scss, and add it to my application.css as well.

I’ve laid out the steps above in a gist.

This way of handling Bootstrap works a lot better than ports like sass-twitter-bootstrap and twitter-bootstrap-rails, and the less.js method:

Update (Jan 22 2012): Bootstrap is consistently changing, so I’ve genericized the steps to illustrate the concept. Should you require the full Bootstrap suite beyond the stylesheets, you could still maintain the repo as a submodule, and use symlinks to point to the relavant folders within Bootstrap.


Now read this

An Injection of Emotion

I was doing my usual rounds through the social networks when I noticed the stark difference of emotions at play. Twitter streams are filled with shared thoughts of humor, anger, arrogance, sadness and intrigue. While Pinterest boards... Continue →