Sass Source Maps in Google Chrome 27 (stable) or Chrome Canary (29)

_sass-sourcemaps.md

How to use Sass Source Maps in Google Chrome 27 (stable) or Chrome Canary (29).

1. Install Sass 3.3.0 alpha (3.3.0.alpha.121) and uninstall older versions
2. If you want to use Compass, stay at version 0.12.2 and don't upgrade to any alpha version!

$ sass --sourcemap --watch sass:css

for compass use:

$ sass --compass --sourcemap --watch sass:css

Grunt

At the moment there is no Grunt Plugin which supports Sass source maps, so i one of my own. Take a Look in sass.js (located in subdirectory tasks) and Gruntfile.js.

Gruntfile.js

module.exports = function(grunt) {
  "use strict";

  grunt.initConfig({
    sass : {
      dev : {
        options : {
          sassFolder : 'sass',
          cssFolder : 'dev',
          sourcemap : true,
          compass : true
        },
        files : {
          'main.css' : 'main.scss'
        }
      }
    },
    watch : {
      dev : {
        files : [ 'sass/**/*.scss' ],
        tasks : [ 'sass' ]
      }
    }
  });

  grunt.loadTasks('tasks');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', [ 'watch:dev' ]);
};

sass.js

module.exports = function( grunt ) {
  "use strict";

  var sassBuildArgsArray,
      sassCompile;

  sassBuildArgsArray = function( options ) {
    var args = [ 'sass' ];

    for (var key in options) {
      if (options[key] === true) {
        args.push( '--' + key );
      }
    }
    return args || [];
  };

  sassCompile = function( args, cb ) {
    //grunt.log.writeflags( args );
    var child = grunt.util.spawn({
      cmd: args.shift(),
      args: args
    }, function (err, result, code) {
      if (code === 127) {
        return grunt.warn(
          'You need to have Ruby and Compass installed ' +
          'and in your system PATH for this task to work. ' +
          'More info: https://github.com/gruntjs/grunt-contrib-compass'
        );
      }
      // `compass compile` exits with 1 when it has nothing to compile
      // https://github.com/chriseppstein/compass/issues/993
      cb((code === 0 || !/Nothing to compile/g.test(result.stdout)) || result.stderr);
    });
    child.stdout.pipe(process.stdout);
    child.stderr.pipe(process.stderr);
  };

  grunt.registerMultiTask('sass', 'Compile Sass to CSS.', function() {
    var args, options, cb, sassFolder, cssFolder;

    options = this.options();
    cb = this.async();

    if (options.sassFolder.charAt( options.sassFolder.length -1 ) === '/') {
      sassFolder = options.sassFolder;
    } else {
      sassFolder = options.sassFolder + '/';
    }
    if (options.cssFolder.charAt( options.cssFolder.length -1 ) === '/') {
      cssFolder = options.cssFolder;
    } else {
      cssFolder = options.cssFolder + '/';
    }

    args = sassBuildArgsArray( options );

    this.files.forEach( function ( file ) {
      var argsFiles = [], filepath, files;

      filepath = file.orig.src.filter( function( filename ) {
        var filepath;

        filepath = sassFolder + filename;

        if (!grunt.file.exists( filepath )) {
          grunt.log.warn('Source file "' + filepath + '" not found.');
          return false;
        } else {
          return filepath;
        }
      });

      // copy array
      for (var i = 0; i < args.length; i++) {
        argsFiles[i] = args[i];
      }

      files = sassFolder + filepath + ':' + cssFolder + file.dest;

      argsFiles.push( files );
      sassCompile( argsFiles, cb);
    });
  });
};