adamwiggall.com

Using the Bourbon Mixin Library

If you want a lightweight set of mixins for your next project, then the Bourbon mixin library, from Thoughtbot, is a great choice. It provides a comprehensive set of mixins, functions and add-ons that are simple to implement and well documented.

Working in a Rails project using Bourbon is as simple as installing the gem and making some minor adjustments to the application.css file, however, outside Rails there is a little bit more work to do.

Setting the library up

Bourbon depends on Ruby to work its magic. Max OS X ships with Ruby, but Windows users will need to install it. I have no experience of that, but, RubyInstaller is apparently the way to go.

While Bourbon has clear installation documentation available, GUI fans and command line phobics need to be aware that you have to ‘go to the dark place’ to get up and running (don’t worry, it’ll be okay, promise).

For the less command line savvy, this line in the docs probably merits further explanation,

# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb

In other words; this is using the Sass sass command to watch --watch a directory stylesheets/sass for changes, and when there is one, it outputs a compiled css file to a directory stylesheets, and to do that it requires -r the bourbon ruby file bourbon.rb.

Customize the output to suit you

So, simply copying and pasting that line into terminal will mean that Bourbon does its thing, but for my default project setup I need a few changes. I always like to keep uncompiled files and various ‘source’ material out of my public folders something like,

> project
  > templates (haml etc)
  > sass
  > coffee
  > public_html
    > assets
      > css
      > js
      > images
    index.html

To get the output working for this layout, I need to change the paths in that Sass command,

sass --watch sass:public_html/assets/css -r ./sass/bourbon/lib/bourbon.rb

This gets me almost what I want, but, in its default configuration the Sass command will output the css in what it calls a ‘nested’ output style, which looks like this,

body {
  color: #222 }

.container {
  width: 90% }

and I am not a fan of the closing bracket being on the same line as the last rule.

To change this, Sass offers a number of style options that you can pass to it on the command line. The one that I use for development is ‘expanded’. So now I add --style expanded changing the command to,

sass --watch --style expanded sass:public_html/assets/css -r ./sass/bourbon/lib/bourbon.rb

producing a much nicer output,

body {
  color: #222
}

.container {
  width: 90%
}

There is also a ‘compressed’ option that will remove all line breaks and unnecessary spaces. So that’s perfect for larger files going to production.

Make it better with LiveReload

Like many, I use the excellent LiveReload application to streamline development. Using Sass with LiveReload is a piece of cake and I don’t have to use the command line to start my work.

Getting LiveReload to compile Bourbon again takes a little effort. The steps are as follows,

  1. Open up LiveReload and add the project root to the Monitored Folders.
  2. Select the checkbox that says “Run a custom command after processing changes”.
  3. Paste in the Sass command from above into the dialog.
  4. Deselect the “Compile SASS, LESS..” option, or fine tune its options to remove the files that the command you just entered is handling.
  5. Apply your changes and bask in the glory…

Give it a try

Although you have to use the command line, a gem, and possibly install Ruby, it’s well worth the effort to get the functionality Bourbon offers. Apart from giving you a better way to develop, it may also teach you a little more about the command line and languages that you’re shying away from.

There are plenty of helpful resources if you get stuck, and if all else fails email me and I will help you out if I can.

Comments