Sass+Compass, Guard, LiveReload

readme.mdown

Work in progress - do not follow or use

Originally forked from https://gist.github.com/dvessel - Thanks buddy!

http://groups.drupal.org/node/206148#comment-683073

How do configure Sass, Compass, Guard, Livereload for the Omega Theme on Drupal 7 under Ubuntu 12.04

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

You will also need the Browser Extension for LiveReload.

http://dgo.to/livereload - Drupal module, you can use a browser extension but the reloading won't happen on mobile devices, use the module.

Place the Gemfile and .GuardFile into your home folder.

Open terminal and type:

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

Then cd to your Omega subtheme directory and cp -r css scss. Next rename all *.css files to *.scss files with cd scss && for i in *.css; do mv -v ${i} ${i/css/scss};done

Now do a compass init and configure the generated config.rb file.

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

http_path        = "/"
css_dir          = "css"
sass_dir         = "scss"
javascripts_dir  = "js"
images_dir       = "images"

Now delete the compass generated folders stylesheets and sass with rm -rf stylesheets sass.

Make the images and js directories with mkdir images js.

In your theme directory, start Guard, make sure your module is enabled 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.
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