One Year of Node Bourbon

One Year of Node Bourbon

Porting the Bourbon Sass library to focus on gulp.js, Grunt, and other Node.js-based build tools.

A year ago we released node-bourbon, our port of thoughtbot’s excellent Bourbon library to node-sass. Node-sass is a Node.js wrapper of LibSass, an extremely fast version of Sass written in C/C++. The original version of Sass is written in Ruby which — while a wonderful language — can be a bit slow. With the forthcoming anniversary, we figured it was due time we wrote a blog post about it.

In case you’re not familiar, Bourbon is a mixin library for Sass, the popular CSS preprocessor. Bourbon provides a great amount of utility while appreciatively remaining lean and simple.

Why port it?

LibSass introduced a dramatic speed increase in Sass compliation that we wanted to take advantage of in our client-side build tools. The original Bourbon was being utilized in our projects for a couple years at that point, however we ran into compilation issues when trying to include it directly since LibSass does not have 100% feature compatibility with Ruby Sass.

We decided to create a project which would include workarounds for those issues, while also providing some conveniences for Node.js-based build tools.

Our primary goals for the project were:

  • A focus on LibSass compatibility
  • Packaged for npm
  • A convenience method for supplying the project path to both the build tool and to other libraries that might depend on it

How to use it

I’ll provide an example for using node-bourbon in a gulp.js project. Assuming you’ve already set up gulp, you’ll next want to add node-bourbon to your project:

npm install --save-dev node-bourbon

Then in your gulpfile.js, use node-bourbon in conjuction with gulp-sass. The includePaths property returns an array containing the path to the Bourbon directory. Example usage:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('path/to/input.scss')
    .pipe(sass({
      includePaths: require('node-bourbon').includePaths
    }))
   .pipe(gulp.dest('path/to/output.css'));
});

If you have additional paths you would like to load, the with() helper can assist:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('path/to/input.scss')
    .pipe(sass({
      includePaths: require('node-bourbon').with(['first/path', 'second/path'])
    }))
   .pipe(gulp.dest('path/to/output.css'));
});

Examples for other tools can be found in the readme on GitHub.

Feel free to send me a tweet if you have any questions!

Michael LaCroix

Software Engineer

We are an innovative design and development team specializing in web and product experiences.

Start a Project