The designers at Thoughtbot have thoroughly impressed me with Bourbon, a set of vanilla Sass mixins that use SCSS syntax.

This isn’t the first time we have covered a project by Thoughtbot (search for Thoughtbot). However, this is the first project of theirs that specifically targets Sass. With the adoption of the SCSS syntax of Sass as the default in Rails 3.1, I’m sure that we can expect even more contributions from them to the Sass and Compass ecosystem.

What do you mean “Vanilla Sass”?

Bourbon was designed to provide a comprehensive framework of Sass mixins that are as vanilla as possible - which basically means they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.

I agree with Phil LaPier, I’m definitely a fan of Compass as well, but going vanilla Sass with this project as well as adhering to the SCSS syntax is a plus for those that are coming to Sass from CSS and requires less configs and more standard conventions.

So what do I get with Bourbon?

As stated in the readme, Bourbon is a work in progress, so feel free to fork it and help out.

Addons and Functions

Bourbon also ships with a number of helpful addons and functions which will be extremely helpful to review for those who want to push the boundaries of their stylesheets.

Requirements and Installation

Whether you’re wanting to install Bourbon in a Rails 3.1.x project, Rails 3.0.9 and below or to a project other than Rails, such as a Serve project or a plain ol’ HTML project, there are instructions for that. Although I will say that I prefer to not copy code from a project like this into my project. I think Compass does this right by leading with including external extensions as gems and keeping them compartmentalized. Keeping it external also promotes any tweaks or changes that need to be made to be put back into the project for all to use and enjoy.

Checkout the readme for details on how to install Bourbon in your project. The only requirement (other than Ruby) is sass 3.1+.

Attention Compass users!

If you’re using Compass in your project you’ll likely hit some gotchas if you’re importing the css3 module. Bourbon and Compass both have mixins for border-radius, box-sizing, etc. You can pick and choose what to import, so go forth knowing that in some cases these 2 overlap and will collide.