Compile and Monitor SASS from Gumby2

By Sam Deering

This is a quick post to show how you can mointor and compile your web app CSS file using COMPASS packaged with Gumby2. Automatically update your main css file whenever you change ANY of your SASS stylesheets. Nice.

Gumby 2 is built on Sass and relies heavily on the power of Compass… Gumby comes with a compiled gumby.css file which you can include and then continue to write CSS in the regular way, however there are a few dependencies you’ll need to install before you can utilise Sass and Compass and unleash the true power of Gumby 2.

Download Gumby2 Gumby2 Demo

1. Setup Gumby2

Run from localhost:8080 or such server – update css/gumby.css @import for google font – add http:// instead of // (change back if you deploy so it caters for https:// a nd such). If you run from file:// raw html then chrome will block any XHR requests

2. Install SASS & COMPASS

See Gumby2 SASS Installation Guide.

3. Install modular scale

Modular Scale is a Gumby2 dependency – It’s used for typography.

git bash install modular-scale


4. Compile and Monitor

You can manually build the css file by typing this:

$ compass compile


If you want compass to automatically build your css file whenever you make changes type this:

$ compass watch


Made a change to the custom styles… and voila!

It’s instantly compiled the new CSS file on the fly just like we normally do.

Note: You don’t need to type compile every time you can just start with watch and it will pickup any changes since last save.


Done! :)

Some Errors Encountered During Setup?

an error occured! (gumby2 modular scale error)

run the install again…


Error again… oops I’m missing the config.rb!


Success! :)


No Reader comments



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.