Bourbon - A Sass Mixin Library

A simple and lightweight mixin library for Sass.

            
  ol {
    > li {
      background-color: #F4F5F7;
      @include background-image( linear-gradient(to left, #FFF, #F4F5F7) );
      float: left;
      font-family: $lucida-grande;
      position: relative;
      @include transition( all 0.8s );

      &::after {
        content: " ";
        height: 23px;
        @include position( absolute, 10px -13px 0 0 );
        @include transform( rotate(45deg) skew(20deg, 30deg) );
        width: 23px;
      }
    }
  }

CSS Output

background-image: -webkit-linear-gradient(   left, #FFF, #F4F5F7);
background-image:         linear-gradient(to left, #FFF, #F4F5F7);

CSS Output

font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;

CSS Output

-webkit-transition: all 0.8s;
   -moz-transition: all 0.8s;
        transition: all 0.8s;

CSS Output

position: absolute;
right: -13px;
top: 10px;

CSS Output

-webkit-transform: rotate(45deg) skew(20deg, 30deg);
   -moz-transform: rotate(45deg) skew(20deg, 30deg);
    -ms-transform: rotate(45deg) skew(20deg, 30deg);
     -o-transform: rotate(45deg) skew(20deg, 30deg);
        transform: rotate(45deg) skew(20deg, 30deg);

Forget about vendor prefixes.

The mixins contain up-to-date vendor prefixes for support in modern browsers.

// Bourbon mixin with Sass

section {
  @include linear-gradient(to top, red, orange);
}

/* Compiled CSS  */

section {
  background-color: red;
  background-image: -webkit-linear-gradient(bottom, red, orange);
  background-image:         linear-gradient(to top, red, orange);
}

Write CSS faster and easier.

The library contains mixins, functions, and other addons to build kick ass web stuff.

// Bourbon mixin with Sass

h1 {
  font-family: $helvetica;
  font-size: golden-ratio(14px,  1);
}

/* Compiled CSS  */

h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 23px;
}

Usage & Installation

Install for Rails 3.1+

In your Gemfile:

gem 'bourbon'

Then run:

$ bundle install

Restart your server. Then rename application.css to application.css.scss:

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss

Delete the sprocket directive in application.css.scss:

*= require_tree .

Import Bourbon at the beginning of application.css.scss. All additional stylesheets must be imported below Bourbon:

@import "bourbon";
@import "home";
@import "users";

Install for a Non-Rails App

Installation

Install the gem

$ gem install bourbon

Install Bourbon into your project's stylesheets directory by generating the bourbon folder:

$ bourbon install

The generated folder will contain all the mixins and other necessary Bourbon files. It is recommended not to add or modify the Bourbon files so that you can update Bourbon easily.

Sass Watch

Run a standard sass --watch from the command line:

$ sass --watch stylesheets/sass:stylesheets

Lastly, import the mixins at the beginning of your stylesheet(s):

@import 'bourbon/bourbon';

Other Commands

See the complete list of Command Line Tools.

$ bourbon help
$ bourbon update

Using Rails 3.0.x?

Or use it in your favorite companion app

Codekit
Codekit can handle Bourbon mixins right out the box, no configuration needed.
Hammer for Mac
Hammer is also preconfigured for Bourbon. Badass.
LiveReload 2
LiveReload supports Bourbon too. Follow the non-rails installation above.