Compass vs Autoprefixer

I wrote about a hacky fix on using the built in Autoprefixer in Codekit 2 with Compass. The article alone wouldn’t have been very helpful if you didn’t know what was autoprefixer and compass.

This article tries to help you with understanding what Compass and Autoprefixer does.

What is Autoprefixer

Autoprefixer is a CSS post processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code against caniuse.com.

The data on caniuse.com is the most accurate data source on browser support on the internet, be it HTML5, CSS or Javascript. It is the place for frontend developers to check for browser support. Since autoprefixer runs checks against caniuse, its prefixes will be spot on.

This means that you don’t have to write any vendor prefixes while writing CSS code. Autoprefixer will take care of everything for you.

If you didn’t know, vendor prefixes are a way for browser makers to add support for newer CSS features that they are still experimenting with. They are used to implement features that hasn’t been fully finalized. Once testing is done, browser makers will automatically remove the need for prefixes for that particular CSS property.

You can specify which browsers to support by stating them within autoprefixer’s preferences. For example:

"last 1 version", " > 1% ", "Explorer 7"

Using autoprefixer in the past was way more difficult that using it now. Previously, you had to be quite knowledgeable development workflows in order to use it. It could be added with dev tools like grunt, gulp, node, ruby, or you had to be comfortable with using the terminal.

Thankfully, its much easier to use autoprefixer now. With the improvement of preprocesses like Codekit 2 and Prepos, you can use autoprefixer by simply checking a checkbox.

The only thing you need to know is how to set autoprefixer preferences like the example given above. Autoprefixer’s github  has a very complete portion on setting these preferences.

What is Compass

Compass is many things in one. Its website mentioned that it’s an open-source CSS Authoring Framework. That doesn’t tell us much, so lets break it down to see what compass does.

Compass helps frontend developers out with these few things:

1. Prefixing CSS - Compass adds vendor prefixes by using mixins and that gets compiled into css.

2. Creating beautiful typographic rhythms - Compass allows you to easilly add vertical rhythms with the help of the vertical rhythms module. I’ve written about using compass vertical rhythms previously here.

3. Adding extra helpful CSS Mixins - In addition to prefixing, Compass also has various helpful CSS mixins that takes effort out from writing CSS manually. An example of this is the word-break mixin that helps with adding hyphens and breaking long words up when they reach the end of the line.

4. Creating Image Sprites - Compass generates images sprites for you with only a few @import command in the sass file, which really helps make spriting incredibly simple.

As you see, Compass does way more than autoprefixer. If we were to compare the two of them, it is only fair to compare the Compass prefixing section with autoprefixer.

Autoprefixer vs Compass at prefixing

Autoprefixer is made to be super duper good at vendor prefixing. It only does that does it much better than compass in the following 3 ways:

1. Cleaner Input

Compass requires to use mixins they have created in order for prefixing to work properly. This means you’re changing how you write CSS to how compass requires you to write CSS.

Autoprefixer allows you to write CSS the way it was meant to be in the CSS Spec. This means that you can just remember CSS syntaxes if you use autoprefixer. It is also more future proof.

2. Cleaner Output

Compass adds unnecessary prefixes for some browers creates some code bloat while autoprefixer takes care of that by checking properties against caniuse as mentioned above. This reduces code bloat by a slight amount.

3. Allows changing of prefixing preferences

This is probably the killer feature in the battle between autoprefixer and Compass prefixing. Autoprefixer allows you to choose browser versions and helps you add or remove vendor prefix for only the browsers you need to have. That helps with the cleaner output as well.

Autoprefixer And Compass Prefixing At Work

It’s much easier to understand if we ended everything with a good example.

In this section, we’re going to compare autoprefixer vs compass in vendor prefixing for two properties – one that requires every vendor prefix while another requires none.

box-sizing - a property that requires vendor prefixes

// autoprefixer input
* {
  box-sizing: border-box;
}

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

// Output (both autoprefixer and Compass)
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

There is only a slight difference between autoprefixer and compass in this case – You had to use a mixin with compass instead of just writing the box-sizing property normally.

border-radius - a property that does not requires vendor prefixes

// autoprefixer input
.example {
  border-radius: 6px;
}

// autoprefixer ouput
.example {
  border-radius: 6px;
}

// Compass input
.example {
  @include border-radius(6px);
}

// Compass output
.example {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

Autoprefixer doesn’t add a single line of prefixing because it understands that there is no more need to prefix theborder-radius property given the set preferences. .

Compass on the other hand, adds all prefixes because there is simply no way to let Compass check whether they are required.

Can you use Autoprefixer With Compass?

YES!

In fact, I highly recommend using autoprefixer in conjunction with Compass in your development workflow because they help out in different ways.

The only unfortunate thing right now is that Codekit 2 users are still unable to use autoprefixer compass is installed within a project.

That was the impetus that led to my previous article on using Codekit 2’s autoprefixer with compass .

I’m not too sure about whether you could use Prepos with Compass and autoprefixer though, because I’ve never used it. If you have tried and it works great, let me know!