Sass'd Bootstrap with Rails 3.1
Posted on 08/31/2011
Update: Sass'd Bootstrap Even better
I saw Twitter's Bootstrap and thought it was awesome. Then I saw that somebody had ported Bootstrap over to SASS and I thought that was even more awesome. Finally, I thought hey let's crank the awesomeness up to 11 and use that sassy Bootstrap in my Rails 3.1 app.
It went something like this...
Clone the SASS fork of the Bootstrap repo
git clone https://github.com/jlong/sass-twitter-bootstrap.git
Then copy everything in the lib folder (scss files) over to your rails app.
cp sass-twitter/bootstrap/lib/*.scss path/to/railsapp/app/assets/stylesheets
By default Rails includes all of the file under the stylesheets directory, so I opened up railsapp.dev to see if it would magically work without any intervention on my part.
BOOM. Of course not.
Sass::SyntaxError: undefined variable: "$baseline".
(in /path/to/railsapp/app/assets/stylesheets/forms.scss)
I figured it wouldn't be that easy, but it was worth a try. Clearly things weren't being required/included in the proper order which was leading to this undefined variable
error. If you've used Rails 3.1 then you know that the vanilla application.css file contains a few "require" statements like so:
/*
* 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 .
*/
Including everything in the stylesheets directory by default is nifty and all, but I prefer to explicitly include each of my stylesheets, so I removed require_tree
and then explicitly required bootstrap. Since bootstrap.scss is nothing but @include
statements for the other scss files, so it's the only one you need.
Once that's done, you should be good to go. Just refresh your browser and bask in its sassy, bootstrappy glory.