Auto-refresh your browser when updating a sass file

#ruby

#css

#html

#guard

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.