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.

Such Doge

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;
}

Spongebob Sprites are awesome

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Ana Tudor

    I’m using Compass because of the mathematical functions it comes with. I can write my own sqrt() or sin() functions in Sass, but they’re slower than the ones Compass provides.

  • http://scottohara.me/ Scott O’Hara

    Nice comparison between the two, Hugo.

    Also, glad to see you’re sticking with not using either. I find these as incredible Sass resources, but am in the same camp in that I’d rather build my own components, as I want them.

  • http://websanya.ru/ Alexander Goncharov

    Thanks for the article Hugo! The best way for me is to write my own mixins and functions with compass helpers. If you are using not the whole patterns, but just helpers, they provide the necessary level of flexibility to you modules.

  • http://hugogiraudel.com/ Hugo Giraudel

    You can’t. They conflict with each other.

    • http://ad511.cz.cc/ AdamG511

      Scratching my head. gem install bourbon…. bourbon install… @include bourbon

    • c89williams

      I use both and they don’t conflict with each other at all.

      Bourbon for useful mixins, Neat for grid & responsive design, Compass for sprite generation & more mixins, and Gulp for watching directories and putting it all together (autoprefixer, css & js minification, js concatenation, etc). Yes Gulp will run Compass upon having SCSS files change. Has worked perfectly for me so far and I have no complaints.

  • http://hugogiraudel.com/ Hugo Giraudel

    Fair point, Bourbon’s docs are better. Agreed.

  • http://hugogiraudel.com/ Hugo Giraudel

    Ouh, very nice catch. Thanks for sharing.

  • http://hugogiraudel.com/ Hugo Giraudel

    There is a shitload of sprite builders out there, most of them running on Grunt. Nice to have a cool alternative using command line.

  • http://hugogiraudel.com/ Hugo Giraudel

    Long story short: Compass being developed by one of the 2 Sass maintainers, it is very closely tied to Sass. It partially rewrites the Sass compiler to make it easier to use (hello `compass watch`).

    Most of the cases, Compass is being used for CSS 3 mixins. Because it is mostly written in Ruby, it is kind of slow for such a purpose, especially compared to Bourbon.

  • http://hugogiraudel.com/ Hugo Giraudel

    Problem is Libsass is still on 3.1 as far as I know. :(

    • http://jiffdesign.de/ sascha fuchs

      Not complete, Libsass goes more and more a mixed way. Libsass can handle now prefix selectors &-….. (3.3 Feature).

      But by the way i jumped back to ruby-sass, the Speed from Libsass is awesome but the bugs with @extend and working without map data types makes me not happy.

      • http://hugogiraudel.com/ Hugo Giraudel

        But by the way i jumped back to ruby-sass, the Speed from Libsass is awesome but the bugs with @extend and working without map data types makes me not happy.

        Precisely.

  • http://ivanvasquez.co/ Ivan Camilo Vásquez

    I agree with this. Compass fails miserably compiling a large project; 10s-15s is not a reasonable compile time.

    Libsass is way, way faster; I prefer sticking with it in spite of not having 3.3’s awesome new features. Coding speed trumps new features in my book always.

  • lozandier

    Why not use both? bourbon-compass and neat-compass have never been problematic for me to use what they uniquely offer that Compass doesn’t.

    • http://hugogiraudel.com/ Hugo Giraudel

      I don’t see the point of using both.

  • Jannik Zschiesche

    This is so true.

    It is only a matter of time until libsass becomes usable (= up-to-date featurewise and bugfree) and I will use it then.

    Won’t work with compass because of the ruby extensions.

  • http://oddbird.net/ Eric M Suzanne

    A bit more context around Grids: Compass Blueprint was indeed a Sass port of the original Blueprint CSS grids. It has moved out of Compass, but still exists elsewhere on the internet. There are many other grid systems written for Compass, but the direct parallel for Neat is Susy — written by a Compass core contributor (me), and fully integrated. Neat is originally a port of Susy for Bourbon (since Susy originally required Compass), though they have diverged some at this point. Susy 2 now works equally with either library.

    • http://hugogiraudel.com/ Hugo Giraudel

      Hey, thank you very much for the input Eric. :)

  • iainhouston

    Thanks Hugo. Re the Prefixes line in your table: one could always globally turn off Bourbon’s prefixing ($prefix-for-xxx: false;) and include autoprefixer in your grunt css post-processing when building for production if reference to the Can-I-Use database is an important consideration. I think I’ll do this. (autoprefixer references Can I Use)

    • http://hugogiraudel.com/ Hugo Giraudel

      Good point.

  • Niek Weevers

    I think Compass is not too slow. You can only load the parts of compass that you need. You don’t need to include full Compass functionality.

  • carrie dils

    Great breakdown. Thanks, Hugo!