Faster Color Theming With Compass and Sass

Designing in-browser is often faster than using a graphics application. The result can be deployed immediately, and maintained easily in version control. There’s no excuse not to be doing this, except perhaps, you don’t know how yet.

Here’s a glimpse at my normal workflow for theming a site with Compass and Sass. On this particular project, I needed to create multiple color themes each with their own master stylesheet to allow CMS users to change the theme of their site.

Checkout the video below. I know I could have been more thorough, so leave a comment if you have a question.

Here’s the gradient-bg mixin demonstrated in this video: note: I’m sorry for the syntax highlighting. Pygments doesn’t grok the new Sass syntax.

View the gist on Github.