_1_akw
Last Updated: February 25, 2016
·
6.23K
· dommmel
E6b625008c816ab3d8d742cc3eddbb00

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.

Say Thanks
Respond