Bourbon 5.0, Autoprefixer, and You.

By North Street, A Creative Studio

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. 

 

About north street

We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.

More Notes

London Biedron Header

Team Spotlight: London Biedron, Client Development Specialist

Rebrand

How to Roll Out a Rebrand

12 Mood Boards to Inspire Your Rebrand