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.

CSS goblin. Sass hacker. Margin psycho. Author of Sass Guidelines, SassDoc, Sass Compatibility, Browserhacks and a lot of Sass stuff.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • http://devolute.net devolute
  • Savior

    Nice article, ty!!

  • 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.

  • Filipe Linhares

    An alternative to Compass’s sprite generator. https://github.com/lucasmazza/spriteful

  • westernbridge

    I was hanging onto Compass solely for the data URI inline-image function, but finally dropped it after coming across a separate module that does the same thing: https://gist.github.com/mrinalwadhwa/2958063

    You can just “require” that file be included within your SASS watch instructions. The referenced link has an example of how to do that. If you want to seamlessly transition from Compass you’ll have to rename “data_url” to “inline_image” within the source.

  • http://hugogiraudel.com/ Hugo Giraudel

    You can’t. They conflict with each other.

    • http://devolute.net devolute

      Try: https://github.com/jedfoster/bourbon-compass
      (although, i believe other techniques are available)

    • 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.

  • Peterisjur

    If you make big project you now about Compass and Sass performance. Then you switch to libsass because libsass is 100 times faster. And then Bourbon and neat (node-bourbon, node-neeat for grunt) is only one answer

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

    okay I am totally confused here.. AFIK, Bourbon was always just an extension of SASS, Compass is a ruby compiler of my SCSS, and I can include bourbon, neat, zen-grids, or whatever, Compass –pre does play with the latest Sass from my testing, Oh! and by the way, https://github.com/ai/autoprefixer is very sexy as opposed to the old compass functions

  • 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!

  • http://davidhellmann.com/ davidhellmann

    Good overview, nice to read.

    @HugoGiraudel:disqus

    A little question. I’ll try out Bourbon now. I’ve checked neat but I’m not happy with it. It looks like it’s not possible to change the gutter style. Neat use margins but I dont like margins for that case. I prefer paddings with box-sizing: border-box;

    What you think about it? It is better to use another grid or write an own little mixin for a grid?

  • Oskar

    I haven’t worked with neat, but a lot with singularitygs. So if you don’t use bourbon with neat, go check out singularitygs. It looks like these two grids bring very similar functionality.

  • Lucas Dechow

    “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)”

    I had the opportunity to chat with Chris Eppstein and he told me that he had started working on a port of Blueprint for SASS which were the basis of Compass.
    The Blueprint styles and grid were in the framework for a long time. However I do believe it is indeed the original Blueprint grid that the Blueprint framework provided.

    See here: http://compass-blueprint.org/ – Chris M. Eppstein’s name is indeed in the footer copyright.
    This was the original project of porting the Blueprint framework which eventually became Compass.

  • http://www.safeharbor.com/ Dmitry M

    Worth mentioning that Bourbon is cutting support for older browsers so a lot of the prefixes ( -webkit-, -moz-, etc.) are getting deprecated.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.