Getting Started with Sass, Bourbon, and Neat with Yeoman

Don Okuda

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

The output should look similar to this:

yo-webapp setup 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:

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 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: '<%= 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:

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: ['<%= 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:

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.