Compile and Monitor SASS from Gumby2

Sam Deering
Tweet

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

gumby2-1

4. Compile and Monitor

You can manually build the css file by typing this:

$ compass compile

gumby2-2

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

$ compass watch

gumby2-3

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.

gumby2-5

Done! :)

Some Errors Encountered During Setup?

an error occured! (gumby2 modular scale error)

run the install again…

gumby2-6

Error again… oops I’m missing the config.rb! https://raw.github.com/GumbyFramework/Gumby/master/config.rb

gumby2-7

Success! :)

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments