---
title: Getting Started with Sass, Bourbon, and Neat with Yeoman
teaser: |
  How set up a project with the CSS suite Sass, Bourbon, and Neat
  using the build toolchain Yeoman, Grunt, and Bower.
tags: bourbon,sass,design
author: Don Okuda
published_on: 2014-03-10
---

[Yeoman][yeoman] is a toolchain for front-end development utilizing
[Grunt][gruntjs] and [Bower][bower] to scaffold, develop, and build webapps.

There are [official generators][official-generators] maintained by the Yeoman
team such as [generator-angular][generator-angular] for [AngularJS][AngularJS]
and [generator-backbone][generator-backbone] for [Backbone.js][BackboneJS].

Yeoman also supplies framework specific generators for Backbone and Angular
like `yo backbone:model Foo`. With Yeoman, you can spend more time writing code
and less time configuring out of the box.

In this post, we will create a basic Yeoman project, install Sass (without
Compass) using Grunt, and set up Bourbon and Neat using Bower.

## Creating a Yeoman Webapp project

Start by installing Yeoman.

    npm install -g yo

Next, install a Yeoman generator. For this example, I'll be using the
[Yeoman Webapp Generator][generator-webapp]:

    npm install -g generator-webapp

Create a folder for your project (in this case: `yeoman-example`), change
directory to the folder, then run `yo webapp`:

```sh
mkdir yeoman-example
cd yeoman-example
yo webapp
```

The output should look similar to this:

![yo-webapp setup screen][yo-webapp-screen]

Arrow down so that "Bootstrap" is deselected and "Sass" is selected.
Press "Enter."

Next, install Bourbon and Neat using Bower:

    bower install --save bourbon
    bower install --save neat

That's it! Bower automatically adds the import statements to your stylesheet
and sets up your `Gruntfile.js` for you.

## Installing grunt-contrib-sass

Make sure you have Sass installed. You can find out by running `sass -v` and if
it outputs a version number.

    $ gem install sass
    $ sass -v
    Sass 3.4.6 (Selective Steve)

Next, install `grunt-contrib-sass` using the command:

    npm install grunt-contrib-sass --save-dev

In the project's `app` folder, create a new folder called `sass`. This is where
we will put our sass files. Move `main.css` to `app/sass` and change the
extension to `.scss`:

<kbd>
mkdir app/sass
<br />
mv app/styles/main.css app/sass/main.scss
</kbd>

## Installing Bourbon and Neat using Bower

Install [Bourbon][bourbon] and [Neat][neat] using `bower install --save`:

    bower install --save bourbon
    bower install --save neat

This downloads and saves the Bourbon and Neat repositories in the
`bower_components` directory.

In `main.scss`, import `bourbon` and `neat`:

    // In `app/sass/main.scss`
    @import 'bourbon';
    @import 'neat';

    // Other imports and styles go here

## Configuring Sass with Grunt

Next, we'll need to configure our Gruntfile for compiling `.scss` files.
Open `Gruntfile.js` and update `grunt.initConfig` to configure what files to
compile with Sass.

We will also add an `options` hash with Bourbon and Neat's stylesheets to the
Sass `loadPath`. By adding these to the `loadPath`, Sass will see Bourbon and
Neat's stylesheets in `bower_components/..`when we use `@import 'bourbon';` and
`@import 'neat';`:

```javascript
grunt.initConfig({
  // ...
  sass: {
    dist: {
      files: [{
        expand: true,
        cwd: '<%= config.app %>/sass',
        src: ['*.scss'],
        dest: '<%= config.app %>/styles',
        ext: '.css'
      }],

      options: {
        loadPath: [
          'bower_components/bourbon/dist',
          'bower_components/neat/app/assets/stylesheets'
        ]
      }
    }
  },
  // ...
})
```

We also want the `sass` task to execute when we run `grunt build`. You can
achieve this by adding `sass` to the `build` task:

```javascript
grunt.registerTask('build', [
 'clean:dist',
 'useminPrepare',
 'sass',
 // ...
]);
```

## Setting up Auto Compile

When you run `grunt serve`, Grunt will start a server, watch files, and run
tasks based on what files are changed.

In `Gruntfile.js`, update the `watch.styles` hash in `grunt.initConfig` to compile
`.scss` files whenever they are changed:

```javascript
grunt.initConfig({
  // ...
  watch: {
    styles: {
      files: ['<%= config.app %>/sass/{,*/}*.scss'],
      tasks: ['sass', 'newer:copy:styles', 'autoprefixer']
    }
    // ...
  },
  // ...
})
```

Last, let's have Grunt compile our Sass files when we first run `grunt serve`.
Add the `sass` task where the `serve` task is registered:

```javascript
grunt.registerTask('serve', 'start the server and preview your app, --allow-remote for remote access', function (target) {
  // ...
  grunt.task.run([
    'clean:server',
    'wiredep',
    'sass',
    // ...
  ]);
});
```

## Wrapping up

Your project is now ready to go with Sass, Bourbon, and Neat!

Understanding how to add and configure Sass with Yeoman allows you to use
different generators without worrying if they come with the right options for
Sass.

[AngularJS]: http://angularjs.org/
[BackboneJS]: http://backbonejs.org/
[bourbon]: http://bourbon.io/
[bower]: http://bower.io/
[compile-files-in-a-directory]: https://github.com/gruntjs/grunt-contrib-sass#compile-files-in-a-directory
[generator-angular]: https://github.com/yeoman/generator-angular
[generator-backbone]: https://github.com/yeoman/generator-backbone
[generator-webapp]: https://github.com/yeoman/generator-webapp
[grunt-contrib-sass]: https://github.com/gruntjs/grunt-contrib-sass
[gruntjs]: http://gruntjs.com/
[neat]: http://neat.bourbon.io/
[nodejs]: http://nodejs.org
[official-generators]: http://yeoman.io/generators
[yeoman]: http://yeoman.io
[yo-webapp-screen]: https://images.thoughtbot.com/yeoman-sass/yeoman-webapp.png