Lavorando con Sass si sente subito l’esigenza di avere un tool che ci generi in automatico i file .css, le possibilità sono tante, una di queste può essere l’uso di Grunt.

Per iniziare installiamo NodeJs:
su Ubuntu

$ apt-get install python-software-properties
 $ apt-add-repository ppa:chris-lea/node.js
 $ apt-get update
 $ apt-get install nodejs

su OSx

$ brew install node

Poi dobbiamo configurare le dipendenze npm:

$ npm init
$ npm install grunt --save-dev
$ npm install grunt-contrib-sass --save-dev
$ npm install grunt-contrib-watch --save-dev

A questo punto avremo un packeage.json simile a questo:

{
  "name": "my-project",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-contrib-sass": "~0.7.3",
    "grunt-contrib-watch": "~0.6.1"
  }
}

Per usare grunt da riga di comando dobbiamo installare Grunt Cli

$ sudo npm install -g grunt-cli

Installiamo Sass (necessità di Ruby installato)

$ sudo gem install sass

Configuriamo Grunt creando un Gruntfile.js così:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'styles/style.css' : 'sass/style.scss',
                    'styles/style-ie.css' : 'sass/style-ie.scss',
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

A questo punto quando lavoriamo ci basterà lanciare grunt ed avremo il watch sui sass che, appena modificati, verranno compilati dalla cartella sass e spostati nella cartella styles.

$ grunt