Compass vs Bourbon

Back in March, I shared my experience with SASS. Since then, I have been able to play around a little more and experiment with some of the other capabilities of SASS and the two main libraries that can be used with it: Compass and Bourbon. Both are sets of functions, or mixins, and pre-set styles that help ease the process of writing styles for a website. While they both share the same purpose, they are not quite the same and I have found that I ended up favoring one over the other.


compassAfter talking with other developers, they all seem to favor using compass whenever they are writing styles with SASS, and I don’t blame them! It is a very powerful tool helping developers make use of the latest technologies and not having to worry so much about browser compatibility. One thing that TKG always places at high value when we develop new websites is browser compatibility to encompass the greatest number of exposure to the public for clients. Without Compass, certain styles would need to be written 3-5 times in order to cover all of the browsers that we need to cover. Compass can be used to write that same code once, and it will write that style the other 2-4 times, speeding up the development process. Compass is able to help with 5 areas of writing styles: CSS3, Typography, basic style patterns, page layout, and even comes with a CSS reset to give your site a fresh start.

Compass Addons
Susy is a responsive website framework that works with Compass. It is helpful, but I found some things to be counter-intuitive and a little more confusing to use. If you are using compass, I will still recommend this framework, though, for responsive web design.

The Downside of Compass
The only downside I have found with is the size of the library compared to how much is typically used. I used this framework starting out and would only ever use the CSS3 capabilities, which leaves 80% of what I’m including into a website unused.


bourbonOn one of the more recent projects, I have tried a different SASS framework: Bourbon. A co-worker found this framework and was able to give it a shot before I did, so I had a frame of reference as to the usefulness as compared to Compass. It has the following similarities to compass:

  • CSS3, layout, and reset styles are included in the package
  • Helps with making sure the styles on a site are browser compatible
  • Has a set of addons that makes developing websites a lot quicker

The ease of use seems to be much better as compared to Compass. Everything is very straight forward and there is very little that needs to be “figured out”. Part of this comes with Bourbon being a much smaller size than Compass limiting it down to just the necessities. Even with the first time I have used this framework I felt like I was developing at a faster rate than when I was using Compass

Bourbon Addons
Bourbon has 3 major addons Neat, Bitters, and then Refills. Neat is the responsive framework that goes along with Bourbon, Bitters, is the style reset as well as some base styles for different elements, and refills is not so much an addon, but more so a set of basic patterns that can easily be implemented to a site.

The Downside of Bourbon
There may be a little more coding involved as compared to Compass.

After evaluating both, I chose Bourbon. It is very lightweight in comparison, and, for me at least, was a lot easier to use. Since it provides the same capabilities as Compass, without including as many files that go unused, and still has a solid responsive framework and style reset, I would put my money behind this being a better choice.

Have you tried either Compass or Bourbon? Let us know your opinion in the comments…

Leave a Reply

Your email address will not be published. Required fields are marked *

16 + 14 =