Fastest way to compile SCSS (Compass) + refresh the browser?

Question

Just wondering what in your opinion is the fastest way to have your SCSS compiled and browser refreshed? I'm currently using LiveReload, but it seems to be a bit slow sometimes, it can take from 1-3sec. It doesn't seem much, but I feel like I'm losing my proper coding pace.

What do you guys use? would CodeKit be faster? Or maybe Sublime LiveReload plugin (not the actual app)? Or maybe I should give up Compass and use something else? Any suggestions would be appreciated.

PS. I'm on OS X

Answer 1

I use this stack:

• gruntjs
• grunt-sass (uses libsass via node-sass instead of ruby sass)
• grunt-watch-contrib

Caveats

• Sass indented syntax is not supported.
• Compass is not supported

But it is much faster x100xxx...!

Read more here:

http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

Example

To enable live reload on your page, add a script tag before your closing body tag:

<script src="//localhost:35729/livereload.js"></script>

That's an example of a Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    sass: {
      dist: {
        options: {
          outputStyle: "nested"
        },
        files: {
          "dist/css/app.css": "src/scss/app.scss"
        }
      }
    },
    watch: {
      options: {
        livereload: true
      },
      grunt: {
        files: ["Gruntfile.coffee"]
      },
      sass: {
        files: "src/scss/app.scss",
        tasks: ["sass"]
      }
    }
  });
  grunt.loadNpmTasks("grunt-sass");
  grunt.loadNpmTasks("grunt-contrib-watch");
  grunt.registerTask("build", ["sass"]);
  grunt.registerTask("default", ["build", "watch"]);
};