Getting Started with Sass, Bourbon, and Neat with Yeoman

Getting Started with Sass, Bourbon, and Neat with Yeoman

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

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

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:

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:

$ mkdir yeoman-example
$ cd yeoman-example
$ yo webapp

When prompted, make sure “Sass with Compass” and “Bootstrap” are deselected. We will be adding Sass ourselves using the official grunt-contrib-sass plugin.

The setup should look similar to this:

yo-webapp setup screen

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.2.14 (Media Mark)

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:

$ mkdir app/sass
$ mv app/styles/main.css app/sass/main.scss

Installing Bourbon and Neat using Bower

Install Bourbon and Neat using bower install --save:

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

This downloads and saves the Bourbon and Neat repositories in the app/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';:

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

      options: {
        loadPath: [
          '<%= yeoman.app %>/bower_components/bourbon/app/assets/stylesheets',
          '<%= yeoman.app %>/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:

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:

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

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.

Don Okuda Designer

Hound reviews Ruby and CoffeeScript code for style violations and comments on your GitHub pull requests. Free for open source repos.