Sass Frameworks: Compass or Bourbon?

Share this article

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.

Frequently Asked Questions (FAQs) about Sass Frameworks

What are the key differences between Compass and Bourbon Sass frameworks?

Compass and Bourbon are both popular Sass frameworks, but they have some key differences. Compass is a comprehensive framework that comes with a lot of built-in functionality and mixins. It also has a robust sprite generator and a large community of users. However, Compass is heavier and requires Ruby to run, which can be a disadvantage for some developers.

On the other hand, Bourbon is a lightweight and simple framework. It provides a set of useful mixins but doesn’t include any pre-defined styles, giving developers more flexibility. Bourbon is also written in pure Sass, so it doesn’t require Ruby. However, it lacks some of the advanced features of Compass, such as sprite generation.

How can I choose between Compass and Bourbon?

The choice between Compass and Bourbon depends on your specific needs and preferences. If you need a robust, feature-rich framework and don’t mind the Ruby dependency, Compass might be the better choice. If you prefer a lightweight, flexible framework and want to avoid Ruby, Bourbon could be more suitable. Consider your project requirements, your familiarity with Ruby, and your preference for simplicity or functionality.

Can I use both Compass and Bourbon in the same project?

Technically, it’s possible to use both Compass and Bourbon in the same project. However, it’s generally not recommended because it can lead to confusion and redundancy. Both frameworks provide similar functionality, so using both can result in duplicate code. It’s usually better to choose one framework that best fits your needs.

What are some alternatives to Compass and Bourbon?

Besides Compass and Bourbon, there are several other Sass frameworks you might consider. These include Susy, Neat, and Foundation. Each of these frameworks has its own strengths and weaknesses, so it’s worth researching and comparing them to find the best fit for your project.

How can I get started with Compass or Bourbon?

To get started with Compass, you’ll need to install Ruby and the Compass gem. Then, you can create a new Compass project using the command line. For Bourbon, you’ll need to install the Bourbon gem and then import it into your Sass file. Both frameworks have detailed documentation and tutorials to help you get started.

Are Compass and Bourbon compatible with all browsers?

Both Compass and Bourbon aim to be compatible with all modern browsers. However, some features may not work in older browsers or certain versions of Internet Explorer. It’s always a good idea to test your code in multiple browsers to ensure compatibility.

Can I use Compass or Bourbon with other CSS preprocessors?

Compass and Bourbon are specifically designed for Sass, a CSS preprocessor. While it’s technically possible to use them with other preprocessors like Less or Stylus, it’s not recommended and may require significant modifications.

Do Compass and Bourbon support responsive design?

Yes, both Compass and Bourbon support responsive design. They provide mixins and functions that make it easier to create responsive layouts and adapt your design to different screen sizes.

How can I contribute to Compass or Bourbon?

Both Compass and Bourbon are open-source projects, so you can contribute by reporting bugs, suggesting features, or submitting code. Check their respective GitHub pages for more information on how to contribute.

Where can I find more resources to learn about Compass and Bourbon?

The official documentation for Compass and Bourbon is a great place to start. You can also find tutorials, articles, and videos online. Websites like SitePoint, CSS-Tricks, and Smashing Magazine often publish useful content on Sass and its frameworks.

Kitty GiraudelKitty Giraudel
View Author

Non-binary trans accessibility & diversity advocate, frontend developer, author. Real life cat. She/they.

bourboncompasssasssass frameworksass mixins
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form