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.

 
24
Kudos
 
24
Kudos

Now read this

850 Million. Trained.

“Facebook has trained 850 million people to sign up and create a profile.” Ben Silbermann, co-founder of Pinterest. Now take a step back and soak it in. Think about what that means for your product. Think beyond just sign up and profile... Continue →