Auto-refresh your browser when updating a sass file

Wouldn't it be nice if your sass/scss files would automatically compile and all changes immediately show up in your browser? One way to achieve this it is the following:

• Install the live-reload browser extension for the browser of your choice

• Add the following gems (you might not need all of them):

  Gemfile

  source "https://rubygems.org"
  group :development do
    gem "compass"
    gem 'sass'
    gem 'sass-globbing'
    gem 'compass'
    gem 'compass-validator'
    gem 'oily_png'
    gem 'css_parser'
    gem 'guard'
    # https://github.com/guard/guard#efficient-filesystem-handling
    gem 'rb-fsevent', :require => false # Mac OSX
    gem 'guard-compass'
    gem 'guard-shell' 
    gem 'yajl-ruby'
    gem 'guard-livereload'
  end

• Assuming you use compass for your project and thus have config.rb in your project's root folder - add the following guard file

  Guardfile

  group :development do
    guard :livereload do
      watch(%r{.+\.(css|js|html?)$})
    end
  
    if File.exists?("./config.rb")
      # Compile on start.
      puts `compass compile --time --quiet`
      # https://github.com/guard/guard-compass
      guard :compass do
        watch(%r{(.*)\.s[ac]ss$})
      end
    end
  end

  the above guardfile is one I use for static website projects. A variant that should work well for Rails projects can be found here (stackoverflow link).

• Install the gems and run guard

  bundle install
  guard -i

• Done! You can now open your webpage in the browser, make some changes to a sass file, save and watch your browser refresh the page.