Sass+Compass, Guard, LiveReload

_readme.mdown

Note that this is not specific to Rails projects. I work with Drupal themes.

This will enable Sass+Compass with LiveReload through Guard. (Guard screen cast)

You will also need the Browser Extension for LiveReload.

If you prefer going through a GUI, that option is available.

Place the Gemfile and .GuardFile into your home folder.

Open terminal and type:

$ gem update --system
$ gem install bundler
$ bundle

The above commands might require sudo if your using the default ruby installation on Mac OSX. You will also need to install Developer Tools which is free from the AppStore. I’m using a HomeBrew installation. RVM is another option. Both do not require sudo.

UPDATE: You can now use Command Line Tools for Xcode instead of the full Developer Tools.

Then cd to your theme and compass init and configure the generated config.rb file. Here's an example:

# http://compass-style.org/help/tutorials/configuration-reference/

http_path        = "/"
css_dir          = "styles"
sass_dir         = "styles"
javascripts_dir  = "scripts"
images_dir       = "images"
fonts_dir        = "fonts"
project_type     = :stand_alone
environment      = :development
output_style     = :nested
relative_assets  = true
disable_warnings = false
line_comments    = true
preferred_syntax = :scss

In your theme folder, start the Guard, enable the Browser plug-in and start editing.

$ guard

Using compass watch or the equivalent in Sass is not required since it is being handled through Guard::Compass. A huge plus of Guard is that it uses a single observer and the extensions handle specific details like communicating with the browser (LiveReload) or telling Compass to compile. Any modifications will be directed to specific Guard extensions based on watch rules.

Gemfile

# ~/Gemfile

source "http://rubygems.org"

group :development do
  gem 'compass'            # Depends on Sass, will be installed automatically.
  gem 'compass-960-plugin' # 960.gs
  gem 'compass-validator'  # So you can `compass validate`.
  gem 'oily_png'           # Faster Compass sprite generation.
  gem 'css_parser'         # Helps `compass stats` output statistics.
  gem 'guard-compass'      # Compile on sass/scss change.
  gem 'guard-livereload'   # Browser reload.
  gem 'yajl-ruby'          # Faster JSON with LiveReload in the browser.
end

gistfile1.rb

# ~/.GuardFile

# More info at https://github.com/guard/guard#readme

notification :off

# Current watch directory must contain the Compass config file.
if File.exists?("./config.rb")
  # https://github.com/guard/guard-compass
  guard 'compass' do
    watch(%r{(.*)\.s[ac]ss$})
  end
end

# If current or child directories has files we want to monitor for live changes.
# This may throw an error with ruby < 1.9.
require 'find'
if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc)$/}
  # https://github.com/guard/guard-livereload
  guard 'livereload' do
    watch(%r{.+\.(css|js|html?|php|inc)$})
  end
end