Photo-1 Photo-2 Photo-3 Photo-4 Photo-5 Photo-6

@brentmc79

@brentmc79

Full-time web developer. Part-time smart ass.

I'm Brent Collier.

After a year and a half as an engineer on Twitter's Trust & Safety team, I'm looking for my next gig. Contact me if you know of something interesting.

#

Sass'd Bootstrap with Rails 3.1

Posted on 08/31/2011

Update: Sass'd Bootstrap Even better

bootstrap + sass

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_treeand 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.