---
title: Introducing Bourbon Sass Mixins
teaser:
tags: bourbon,sass,open source,design
author: Phil LaPier
published_on: 2011-07-20
---

[Bourbon](https://github.com/thoughtbot/bourbon) is a library, and also a [Ruby
Gem](https://rubygems.org/gems/bourbon), of sass mixins that are designed to be
written as vanilla as possible—meaning, whenever possible, they should not
stray from the original <abbr title="Cascading Style Sheets">CSS</abbr> syntax.
The mixins contain vendor specific prefixes on all CSS3 properties for support
amongst modern browsers. The prefixes also ensure graceful degradation for older
browsers that support only CSS3 prefixed properties.

#### Examples

    # Bourbon syntax
    @include box-shadow(0 2px 2px 0 rgba(0, 0, 0, 0.3));

    # Output
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
       -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
        -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
         -o-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);

    # Bourbon syntax
    @include box(horizontal, start, stretch);

    # Output
            display: -webkit-box;
            display:    -moz-box;
            display:         box;
    -webkit-box-orient: horizontal;
       -moz-box-orient: horizontal;
            box-orient: horizontal;
    -webkit-box-pack: start;
       -moz-box-pack: start;
            box-pack: start;
    -webkit-box-align: stretch;
       -moz-box-align: stretch;
            box-align: stretch;

    # Bourbon syntax
    @include animation-basic( (fadein, slideup), (2.0s, 1.0s), ease-in );

    # Output
    -webkit-animation-name: fadein, slideup;
       -moz-animation-name: fadein, slideup;
            animation-name: fadein, slideup;
    -webkit-animation-duration: 2s, 1s;
       -moz-animation-duration: 2s, 1s;
            animation-duration: 2s, 1s;
    -webkit-animation-timing-function: ease-in;
       -moz-animation-timing-function: ease-in;
            animation-timing-function: ease-in;

### The tools

Bourbon contains a number of commonly used CSS3 properties, such as
[linear-gradient](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_linear-gradient.scss)
and
[border-radius](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-radius.scss).
We've also built in support for the latest CSS3
[animation](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss)
and
[transition](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_transition.scss)
properties. Bourbon has
[flex-box](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss)
and a number of other [CSS3
properties](https://github.com/thoughtbot/bourbon/tree/master/app/assets/stylesheets/css3)
covered.

Our functions are pretty useful too. Like the
[golden-ratio](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_golden-ratio.scss)
function which can be used for calculating heading font-sizes based on the
golden ratio. [Modularscale.com](http://modularscale.com) is an excellent
web-based tool for calculating font-sizes.

### How Bourbon was born

The designers at [thoughtbot](http://thoughtbot.com) are huge fans of
[Sass](http://sass-lang.com/). We've been using sass on all our projects for
over a year now. Previously we had two or three sass mixins that we used across
all our projects (primarily linear-gradient and border-radius). As we began
writing more CSS3 which included vendor specific prefixes, our mixin library
eventually grew larger. With multiple designers working on various apps and
client projects, it became increasingly difficult to distribute and update our
small set of mixins across all these environments. Before the library was
formalized on git, versioning was difficult too&mdash;if I made improvements to
a mixin, there was no efficient way to inform the other designers about the
changes. Eventually the library grew large enough that it became clear that the
best way to manage the mixins was through git, and distribute them with a gem.
And thus Bourbon was born.

### Why vanilla syntax

Part of our core philosophy when creating Bourbon was to keep the mixins as
close to normal <abbr title="Cascading Style Sheets">CSS</abbr> as possible.
There is already learning required with all the new CSS3 properties, and let us
not forget Sass syntax. We thought the best way to learn proper CSS3 was to keep
the mixins as syntactically similar to CSS3 as possible.

### Why not compass

Compass is a great toolset for anyone using sass. We initially solved our own
problems using the toolset we created&mdash;Bourbon. Building our own tools
allows us to have finer control of our mixins, functions and addons, which we
are particularly keen on. We didn't set out to build a public library of sass
mixins, but over time it became increasingly difficult to not share these tools
for other to use. Bourbon has been, and continues to be, a toolset for which we
have been learning from. By creating our own set of mixins, we are pushed to
continuously think of innovative ways to improve our front-end development
knowledge and resources.

### What's with the name

Bourbon Vanilla is the most commonly used variety of vanilla extract&mdash;I
also have a nose for the sweet vanilla notes in a fine bourbon whiskey ;).

We look forward to building out Bourbon to support even more CSS3 properties, as
well as building useful addons and functions for providing designers and
developers with an even greater set of development tools. Keep an eye out for
more blog posts covering Bourbon.

If your palate can handle the sophisticated flavors, try a glass of our fine
[Bourbon](https://github.com/thoughtbot/bourbon).