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:
You are always up to date. Boostrap is under constant improvement and there are frequent pushes. Using Bootstrap as a submodule pointing to the main repo lets you pull in the latest changes anytime, without waiting on forks to port them over.
Sass and Sprockets still work as intended.
Extend Bootstrap as necessary, through cascading/adding Less files.
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.