Introduction to Bourbon

28th June 2017

Bourbon is a Sass mixin library that can be used within your web project to help write CSS faster and easier. With the deprecation of Compass, many developers have switched to use this library. This post will provide a brief introduction to Bourbon including how to install it and use the mixins and functions provided by the library.

To start with, you’ll need to install the gem. This can be done by running the following command.

$ gem install bourbon

Now cd into your project’s directory, and cd within the stylesheets directory within your project structure, run the following command.

$ bourbon install

This will create a bourbon directory within your stylesheets directory. Within the stylesheets directory, also create a sibling sass directory.

Within the sass directory is where the .scss files will reside. If you are starting a new project, create a styles.scss file in this directory.

Within the file, import the bourbon library.

 // /path/to/project/stylesheets/sass/styles.scss

@import "../bourbon/bourbon";

Now cd back into your project’s root directory and run the sass watch command.

$ sass --watch stylesheets/sass:stylesheets

This will automatically watch for changes within styles.scss and output the CSS in a styles.css file within the stylesheets directory.

Now that the bourbon library has been imported, you can start using some of its functionality.

For example, you can use the border-color mixin to set border colours for each direction.

@import "../bourbon/bourbon";

.box {
    border: 1px solid;
    @include border-color(red green yellow blue);
    height: 300px;
    width: 300px;
}

This outputs the following:

.box {
  border: 1px solid;
  border-color: red green yellow blue;
  height: 300px;
  width: 300px; }

The clearfix mixin provides an easy way to clear your floats.

.container {
  @include clearfix;
}

This outputs the following:

.container::after {
  clear: both;
  content: "";
  display: table;
}

How about creating a triangle? This can be done with the triangle mixin.

This mixin takes three arguments: $size, $color and $direction.

• $size can take one or two values – width and height.
• $color can take one or two values — foreground-color and background-color.
• $direction can take one value out of the following: up, down, left, right, up-right, up-left, down-right, down-left

.triangle1 {
    @include triangle(20px, gray, down);
}

.triangle2 {
    @include triangle(12px 6px, gray lavender, up-left);
}

There are plenty of other mixins and features you can use from the Bourbon library. Many of the mixins specified currently in the documentation (as of version 4.3.4) state they are being removed from version 5, so to be sure to keep up to date when this version is released.