Skip to main content

Compile and Monitor SASS from Gumby2

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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

Learn PHP for free!

Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.

Normally RRP $11.95 Yours absolutely free

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

gumby2-7

Success! :)

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.