How to: Live-reload SASS/Compass with Guard

Infuriated by those frequent hits of your refresh button to see your SCSS/Sass changes? If that's the case, chances are high that you haven't given Guard a go. The tool combines the best of two worlds – on one hand it's a powerful Compass compiler while on the other it's a live-reload solution. Making it the perfect companion for theming and designing in the browser.

Requirements

To get Guard going you'll need:

  • Ruby (>= 1.9.2)
  • RVM
  • Compass
  • Guard
  • livereload (browser extension)

RVM

First we need to install RVM. RVM stands for 'Ruby Version Manager' and allows you to install and manage several different versions of Ruby on your machine.

To install RVM just open a new shell and type:

\curl -L https://get.rvm.io | bash

Restart your terminal session after the install is complete.

Install Xcode 5 with command line tools

First, make sure that you have Xcode with the command line tools installed on your machine otherwise just download Xcode and install the command line tools.

Xcode 5 - install command line tools

Check Ruby Version

Guard requires at least Ruby Version 1.9.2 but Mac OS X 10.8, by default, ships with version 1.8.7.

To check your running version of Ruby just type "ruby -v" in the Terminal)

Install Ruby V1.9.3

If you don't have version 1.9.2 or above, we have to install Ruby 1.9.3 first (Xcode > Preferences > Downloads > Command Line Tools).

Go to your shell and type the following (this can take a while):

sudo rvm install 1.9.3

After the installation is complete run the following command:

rvm use 1.9.3 --default

Installing gems

RubyGems (or short gems) is a package manager for Ruby that provides a standard format for distributing Ruby libraries.

So let's install Compass & Guard:

sudo gem install compass compass-validator guard guard-compass guard-sass guard-livereload

Note: Restart your terminal session after the installation has finished. You should now have successfully installed Compass & Guard.

Create the config files for running guard

Guard needs the following files to run

  • config.rb (Which is the config file for Compass)
  • Guardfile (Which is the config file for Guard)

If you are creating a new Compass project then run:

compass init

It creates a basic config.rb file with the basic folder structure.

We can now create the Guardfile

nano Guardfile

and paste the following in

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`
    guard :compass do
      watch(%r{(.*)\.s[ac]ss$})
    end
  end
end

Save + exit with CTRL + C.

Guard is now ready to run:

guard -i

See the documentation here for available options.

Install the livereload browser extension

Install livereload for your favorite browser. Get the extension here:

After the installation, click on the livereload icon in the toolbar of your browser. Back in the terminal it should say now: "INFO - browser connected."

If that's the case, you're ready to go!

The magic part

Edit your SCSS/Sass file, save it and watch your browser. It now automatically injects your changes live without needing to reload your browser every time.

October 23, 2013
0 Comments

Get our Newsletter

Comments

What is Amazee Labs?