Using Bourbon as a mixin library for Sass


UPDATE

… so use Autoprefixer instead!


 

In my last article, I showed you how you can create your own mixins to generate the various vendor prefixes needed for the latest unstabilised CSS3 features to work across all the latest browsers.

Recently, I discovered the mixin library Bourbon which has better versions of the custom mixins I previously wrote. So in this article I’ll be showing you how to use it.

I really like to use Gulp to build my apps. So I’ll be setting up Bourbon to work with that.

Setting up Gulp and supporting plugins

First things first, install the packages you’ll need using the node package manager (npm). The easiest would be for you to take a copy of my package.json file below and edit the obvious parts. The important parts (to leave as is) are the “devDependencies” and “engines” object definitions.

https://gist.github.com/magician11/b93baeca48bd1ea31c85

Then simply run..

npm install

Then configure your gulpfile.js file. The version I currently work with looks like this..

https://gist.github.com/magician11/9a1d308fceb92e55c0ce

Using Bourbon in your SCSS

Then import Bourbon in your main SCSS file and begin using the mixins!

https://gist.github.com/magician11/a6b2676ae664fd49adfb

To see this flyIn in action, you can check out my landing page.

Bourbon is well maintained and very popular. I’ll be using it from now on 🙂


Leave a Reply

Your email address will not be published.