Bourbon 5.0, Autoprefixer, and You.

TLDR; Turn on Autoprefixer at all times. 

At North Street Creative, we leverage the excellent SASS library Bourbon in our stack.

Recently I noticed that they plan to deprecated most of the Mixins I’ve come to rely on:

My assumption had always been that these mixins were doing some fancy stuff to work their magic, but as it turns it, they basically just add in browser prefixes:

We’re already using Autoprefixer via CodeKit — Or at least, you should be. Sometimes the CodeKit file will get lost and those settings will be lost.

So, for a given project, I now make sure all the checkboxes are checked (We only really need Autoprefixer, but it doesn’t hurt to check them all.)

Finally, while these 5.0 features are being deprecated, it doesn’t yet affect us since the version of Bourbon we’re currently using is older than that. Something to keep in mind however, if we ever do upgrade.

(What does Autoprefixer DO? It takes a line like this:

transition: padding-left 0.20s linear;

and turns it into this:

-webkit-transition: padding-left 0.20s linear;
-moz-transition: padding-left 0.20s linear;
transition: padding-left 0.20s linear;

Those prefixes,-webkit, -moz, are only required for ancient browsers, not modern ones. But there’s no reason to worry about adding them into your *.scss files — Let Autoprefixer take care of that.) 

This post is a long-winded way of saying: Turn on Autoprefixer at all times.