Compile and Monitor SASS from Gumby2
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.
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! https://raw.github.com/GumbyFramework/Gumby/master/config.rb
Success! :)
