Compass + Sassy CSS = giddiness
The designer in me has been wanting to break out for some time, and since going back to freelancing, I’ve found some extra time and ran out of excuses to brush up on CSS. In the spirit of DRY, I’ve discovered Compass, a CSS framework that makes it easier to write cleaner HTML and make CSS a bit more “programmable.” For me, defining variables and abstracting cross-browser CSS are the biggest benefits so far.
Compass is pretty awesome to work with. You write your style rules in a Sassy CSS (SCSS), a superset of CSS. While developing, I run the “compass watch” command, which automatically monitors the file system and compiles .scss files to .css on any change. Being too lazy to reload the page on every change, I employ CSS auto-reload to dynamically reload CSS stylesheets as they change without requiring a full page refresh. This is a huge plus during development for a CSS novice like me. Experimenting with layouts to achieve pixel perfection become realistic, much faster than playing with WebKit Developer Tools.
Compass and Sassy have been web development fun again for me, so much that I went crazy and designed this blog theme from scratch. Call me cliche, but I couldn’t resist border-radius and shadows!