#4 Better alternatives to 'compass watch'

A slight disadvantage (besides of having a ton of advantages) of using Sass over native CSS is that you need to compile your Sass files to CSS before loading them up in your browser.

If you do that manually, you need to run compass compile after every change you do to your Sass files.
Note: Sencha Touch is using compass for managing and easily extending their theme framework. The native Sass way to compile is sass --watch file.scss:file.css.

Obviously running it manually after every change would be really annouying.

Luckily, compass has the compass watch command, which starts a running process that keeps watching for changes in your Sass files and compiles them after it detects changes.

This works almost perfectly. At least for me. In my case, the compiling generally took too much time, which often caused that I refreshed my browser before it finished compiling, wondering why my style changes didn't apply.

Apparently, not everyone seems to have that problem. I don't have the newest machine, but it isn't slow in other tasks either.

In case others experience the same effect or rather delay, here are two alternatives to compass watch.

Adding 'compass compile' as a after-save-hook

Robert Dougan from Sencha suggested this solution.
I guess most editors support this.
I'm using TextMate on Mac OS X. It's very simple, you just need to add a Command in your Bundle Editor with the following settings:

I have my config.ru file for compass generally in the parent folder of my Sass files. You also can use $TM_PROJECT_DIRECTORY.

Though, this didn't really solve my problem. I experienced the same delay and risked the same situation of refreshing my browser before the compilation was finished.

Running 'compass compile' on every server request

I'm a Ruby developer as well and I love deploying my Ruby and Sencha Touch apps to Heroku for demoing. Deploying a new app is just two commands away.

Therefore, I usually add a Rack middleware to my Sencha Touch apps in order to let them run on Heroku.

That's how my config.rb file usually looks:

use Rack::Static, :urls => ['/app', '/css', '/images', '/vendor']

run lambda { |env|
  [200, { 'Content-Type' => 'text/html', 'Cache-Control' => 'public,
    max-age=86400' }, File.open('index.html', File::RDONLY)]
}

Well, I thought why not just adding compass compile to my rack file. It's just one line:

use Rack::Static, :urls => ['/app', '/css', '/images', '/vendor']

run lambda { |env|
  `compass compile`
  [200, { 'Content-Type' => 'text/html', 'Cache-Control' => 'public,
    max-age=86400' }, File.open('index.html', File::RDONLY)]
}

This is only called once since you only load your index.html once per refresh. And voilà, I never refresh again without compass being done with compiling. Bazzinga. (Sorry, that just ran in the background.)

Anyway, to avoid running compass compile in your production environment on Heroku, just add these two lines:

use Rack::Static, :urls => ['/app', '/css', '/images', '/vendor']

run lambda { |env|
  unless defined?(RACK_ENV) && RACK_ENV == 'production'
    `compass compile`
  end
  [200, { 'Content-Type' => 'text/html', 'Cache-Control' => 'public,
    max-age=86400' }, File.open('index.html', File::RDONLY)]
}

That's all.