Bourbon: A set of vanilla Sass mixins that use SCSS syntax

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.

The project was originally championed as sass-mixins by Chad Mazzola and co-conspirator Phil LaPier. 3 days ago it was moved to the Thoughbot org and renamed to Bourbon.

For more Sass related news follow @SassWatch and @TheSassWay.

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.

// Custom Functions
@import "functions/compact";
@import "functions/golden-ratio";
@import "functions/tint-shade";

// CSS3 Mixins
@import "css3/animation";
@import "css3/border-radius";
@import "css3/box-shadow";
@import "css3/box-sizing";
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";

// Addons & other mixins
@import "addons/button";
@import "addons/position";

Examples!!

Bourbon does a lot so I expect you to inspect the source yourself, but I’ll list a few popular examples here.

Box Sizing

A new fav to my toolkit, box-sizing will change the box-model of the element it is applied to.

@include box-sizing(border-box);

Border Radius

Border-radius also takes short-hand notation.

@include border-radius(10px);
@include border-radius(5px 5px 2px 2px);

Position

I use position in every design. Instead of writing:

position: relative;
top: 0px;
left: 100px;

You can write:

@include position(relative, 0px 0 0 100px);

Transitions

Transitions supports multiple parentheses-deliminated values for each variable.

@include transition (all, 2.0s, ease-in-out);
@include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
@include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));

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.

Check out the project on GitHub and the readme for more details.

You can also discuss this on Hacker News.