Sass Frameworks: Compass or Bourbon?

Once in a while, we see this question pop on Twitter, Reddit or StackOverflow. Pretty much anyone who has ever worked with Sass has at some point asked themselves which to choose: Compass or Bourbon?

In case I’ve already lost some of you, Compass and Bourbon are frameworks for Sass. Sass, as you probably know, is a trendy CSS preprocessor, right? Okay. In the same way you put jQuery or Backbone or whatever over JavaScript, you can use a framework over Sass to help get things going.

In today’s article, I’d like to give you my opinion on this topic. But first, let me introduce the topic with a little bit of history.

History

Compass describes itself as a CSS authoring framework for Sass. It is maintained by Chris Eppstein, one of the two maintainers of Sass (the Ruby version). Compass is half Ruby and half Sass, and provides a boatload of mixins and a toolbox for Sass. More on this later.

On the other side, Bourbon is built with Sass for Sass by the awesome team at Thoughtbot. According to the project’s home page, Bourbon is more like a library than a framework; a simple and lightweight mixin library for Sass.

So on one hand we have a Ruby/Sass framework, and on the other hand we have a Sass library. Quite different perhaps?

Mixins

When you ask a Compass/Bourbon user what he uses the tool for, the chances are high he’ll tell you: cross-browser compatibility. Okay, maybe he won’t say it like this, but the idea is the same. Both Compass and Bourbon provide a huge collection of mixins to handle CSS3 features so you don’t have to deal with vendor prefixes or CSS hacks.

// Compass
el {
  @include box-sizing(border-box);
}

// Bourbon
el {
  @include box-sizing(border-box);
}

// Doh. Same API. Awesome!

In fact, Compass and Bourbon use the same syntax for most mixins, making the switch from Compass to Bourbon or Bourbon to Compass quite easy.

One important thing between both tools though: Starting with Compass 1.0 (released with Sass 3.3), Compass is directly pulling data from Can I Use…, which means it will (almost) always be up to date with vendor prefixes while Bourbon’s validity, as of this writing, depends on maintainers’ updates.

Note: if you are using Autoprefixer to prefix your vendor properties, then this section won’t matter much to you.

Typography

Both Compass and Bourbon provide some typography-related mixins, variables, and functions. Compass comes with a whole vertical rhythm module, including a lot of variables and a couple of mixins.

// Compass 
$base-font-size: 16px;
$base-line-height: 1.35;
$rhythm-unit: em;

element {
  @include adjust-font-size-to(42px);
}

element {
  font-size: 2.625em;
  line-height: 1.06071em;
}

Compass can even deal with rem units with px fallbacks if you set $rhythm-unit to rem instead of em. That’s pretty nice. There are a ton of options so if you are a typography aficionado, Compass has you covered.

Bourbon is a bit less overwhelming with typography features but it still provides some good functions to get started. Not only can you have pixels to em or rem conversion, but there are also some cute functions like golden-ratio() and modular-scale(). While those are not directly tied to typography, they come in handy when working out a document’s vertical rhythm.

Actually, Thoughtbot decided to address typography concerns in another project (that can be used along with Bourbon of course) called Bitters. More on this at the end of the article.

Grids

What’s a CSS framework without a grid system, right? RIGHT? Okay.

Compass used to ship with Blueprint Grid (which — as far as I know — has nothing to do with the rather old CSS framework called Blueprint). That being said, Compass’s Blueprint is really underused. Of all the people I have met who use Compass, only one has ever tried Blueprint. It’s so underused that Chris Eppstein decided to remove it from Compass starting from version 1.0.0 (matching Sass 3.3).

Meanwhile, Bourbon provides a couple of mixins to help you build your own grid. There are the flex-* functions (that have nothing to do with Flexbox), as well as grid-width(). Actually, Thoughtbot has its own grid system outside of Bourbon called Neat, which describes itself as a lightweight semantic grid framework for Sass and Bourbon. So, Bourbon itself doesn’t include a grid system, you can make good use of Neat.

Long story short, if you need a grid system closely tied to your Sass framework, I suggest you go with Bourbon + Neat. They are built by the same people with the same ideas in mind. It’s like the two pieces of a single puzzle (easy puzzle, you gotta admit).

Helpers

One thing interesting in Sass frameworks is they often provide helpers. Helpers are predefined CSS rules that you can use directly in your stylesheets to save time.

For instance, Compass provides a helper for float-clearing (including several different ways of doing so), a few CSS hacks for old Internet Explorer versions, a reset (with various options), some techniques for image replacement, and more.

Bourbon calls these helpers add-ons but provides slightly fewer helpers than Compass. That being said, Thoughtbot includes many helpers in Bitters, a side project that goes well with Bourbon.

Sprites

Try asking a Compass user why he still uses this library after months or years; I bet he’ll tell you about the sprite builder. This is what Compass is really good for. Because it is partly built in Ruby, Compass can do some pretty cool things with the file system. One of those things is building sprites based on a folder of images. How awesome is that?

// Compass simple API to build sprites
@import "icon/*.png";
@include all-icon-sprites;

Not only does it give a way to automagically generate sprites, but it also provides a couple of handy functions to access image file data inside your stylesheets, like image-width(), image-height(), and even inline-image() to encode an image file in Base64.

// Compass functions accessing file system
.logo {
  $image: "path/to/my/logo.png";
  width: image-width($image);
  height: image-height($image);
  background: inline-image($image) no-repeat;
}

Because Bourbon is built only in Sass, it cannot access the file system, so it provides nothing like this. So if you need a way to dynamically build your sprite files and you don’t run a task runner like Grunt, Gulp, or Ant, then the choice here is clear.

Recap

For quick reference, here’s a table that summarizes what I’ve discussed.

	Compass	Bourbon
Prefixes	yep (from Can I Use…)	yep
Typography	good	decent (good with Bitters)
Grid	nope	with Neat
Helpers	yep	yep + Bitters
Sprites	yep	nope
Community	excellent	very good
Weight	heavy	lightweight

Final Thoughts

So in the end: Compass or Bourbon?

If you ask me: neither. I had been a long-time Compass user until recently when I ditched it for lack of use. Now, I prefer adding my own tools to a Sass project rather than including a whole framework. But that’s just me. I think in most cases it would be better to use a framework, at least for big projects.

Now, there are a couple of criteria that would matter when making your choice but I think the first thing you should ask yourself is: Do I need the image-related features (images dimensions, sprite builder, etc.)?

Compass is amazing for this, but it makes it slow. So slow… So if you don’t need this, then go for Bourbon. It is blazingly fast since it’s basically no more than a bunch of Sass mixins doing Sass stuff in your Sass stylesheets.

Also, if you decide to use Bourbon, I would recommend using other Thoughtbot projects: Neat as a grid system, Bitters as a baseline (typography, variables, themes), and why not even Refills which is basically a competitive alternative to Bootstrap providing a lot of components, ready to be used in your project.