Getting libsass set up

Install libsass with Grunt Sass and add Bourbon. Node-Sass is installed as a dependency of Grunt-Sass

  1. $ npm install grunt-sass --save
  2. $ npm install node-bourbon --save

Add bower.json file

  1. {
  2.   "name": "class-demo",
  3. }

Add some Bower packages

  1. $ bower install color-scale --save
  2. $ bower install type-rhythm-scale --save
  3. $ bower install rwd-toolkit --save

Install Grunt

  1. npm install grunt --save

Install Grunt Watch

  1. npm install grunt-contrib-watch --save-dev

Add gruntfile.js

  1. module.exports = function(grunt) {
  2.   grunt.initConfig({
  3.     sass: {
  4.       dist: {
  5.         files: {
  6.           'public/stylesheets/application.css': 'sass/application.scss'
  7.         },
  8.         options: {
  9.           sourceMap: true,
  10.           includePaths: [
  11.             require('node-bourbon').includePaths,
  12.             './bower_components/color-scale',
  13.             './bower_components/type-rhythm-scale',
  14.             './bower_components/rwd-toolkit'
  15.           ]
  16.         }
  17.       }
  18.     },
  19.     watch: {
  20.       source: {
  21.         files: ['sass/**/*.scss', 'views/**/*.jade'],
  22.         tasks: ['sass'],
  23.         options: {
  24.           livereload: true, // needed to run LiveReload
  25.         }
  26.       }
  27.     }
  28.   });
  30.   grunt.loadNpmTasks('grunt-contrib-watch');
  31.   grunt.loadNpmTasks('grunt-sass');
  32.   grunt.registerTask('default', ['sass']);
  33. };

Create new Sass file

Create the following directory and file, then add some sass to the file.

  1. $ mkdir sass
  2. $ touch sass/application.scss

Install library dependencies

Add these to the application.scss manifest to make Sass aware of these dependencies.

  1. @import "bourbon";
  2. @import "type-rhythm-scale";
  3. @import "rwd-toolkit";

Get grunt started

  1. $ grunt
  2. $ grunt watch