Sass/Compass not compiling using Guard with Middleman setup

Question

I'm running Mac OS X Mountain Lion and recntly setup Ruby via RVM. I then installed Middleman (http://middlemanapp.com/) which works fine. I've been able to add configuration settings and do a build of a project.

My problems come from trying to use Guard to compile Sass/Compass and link in with LiveReload to refresh my browser automatically.

My Middleman project structure is as follows:

{project-name}/site/source

(source is the Middleman folder which compiles to a 'build' folder at the same level)

My gemfile/config.rb/guardfile are here:

{project-name}/site/

Listed below are my Gemfile, Config.rb and my Guardfile.

Gemfile:

# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'https://rubygems.org'

gem 'middleman', '~>3.0.12'
gem 'sass'                      
gem 'compass'
gem 'oily_png'
gem 'guard'
gem 'guard-compass'
gem 'guard-shell'             # Run shell commands.
gem 'guard-livereload'        # Browser reload.

gem 'rb-fsevent', :require => false     # Mac OSX

Congid.rb (Also contains some config for Middleman build but not related to Sass/Compass)

# Sass options:
# http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#options
sass_options = Hash.new

# Enable Sass inspection directly from the browser.
#
# Chrome Canary support (Applies to Webkit Nightlies as well.):
#   http://blog.q42.nl/post/35203391115/debug-sass-and-less-in-webkit-inspector-and-save-css-cha
# Firefox Extension:
#   https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug
#
# Set to true to enable. Enabling will disable `line_comments`.
#
sass_options[:debug_info] = true

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

# Development is the default environment. When compiling for production, this
# should be flagged as :production. This can be done through the command line
# with the following.
#
#   $ compass compile -e production --force
#

environment = :development

sass_dir    = 'source/sass'
css_dir     = 'source/css'
js_dir      = 'source/js'
images_dir  = 'source/img'
relative_assets = true
output_style    = (environment == :production ? :compressed : :expanded)

Guardfile

# ~/.guardfile

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

notification :off

puts "Using guard file for markweston project."

group :development do

  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


  ## Look for specified files in the current and child directories.
  ## `find` requires Ruby 1.9 or greater.
  require 'find'
  if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc|theme)$/}
    guard :livereload do
      watch(%r{.+\.(css|js|html?|php|inc|theme)$})
    end
  end

  # Uncomment block above and remove this if using Ruby 1.9 or greater.
  # https://github.com/guard/guard-livereload.
  # guard :livereload do
  #  watch(%r{.+\.(css|js|html?|php|inc|theme)$})
  # end

end

I can run the 'bundle exec guard' which works, and when I run LiveReload in my browser the terminal tells me the browser has connected.

One thing to note is that I get this error after running 'bundle exec guard':

NoMethodError on line ["264"] of /Users/Mark/.rvm/gems/ruby-1.9.3-p385/gems/compass 0.12.2/lib/compass/configuration/inheritance.rb: activate

Having some trouble figuring that out as well at the moment.

The major issue is when I actually write any Sass in one of my .scss files held in my sass directory, they don't compile to .css in my css directory. The terminal says nothing, nothing happens. I have something wrong with my configuration but just can't figure out what.

Can anyone help please?

Thanks,

Mark.

@CraigColes included a link to a setup project which is handy, but it's worth noting that the Middleman site is actually built in Middleman so might be worth using as a demo: Middleman Guides but it's more complex than the other example. — Mark Weston

bookcasey bookcasey · Accepted Answer · 2013-04-03T23:59:27

I've had good luck with the middleman-livereload gem.

Also, Middleman has Compass and Sass built in and you can vastly simplify this by running middleman server and visiting http://localhost:4567/ during development which will take care of your preprocessing as well as run guard with live-reload to refresh your browser. You won't need to run compass watch or the guard commands anymore.

My gemfile looks like this:

gem "middleman", "~> 3.0.13"
gem "middleman-livereload"

So, I'd strongly reccomend using the prescribed development cycle and not try to re-include Sass and Compass which come baked in.

Sass/Compass not compiling using Guard with Middleman setup

2 Answers