A visual guide to Sass & Compass Color Functions

Once you discover the magic of CSS pre-processors like SASS, you’ll never go back to coding vanilla CSS. Popular features like variables, mixins, and nesting are huge time savers that are easy for any novice to pick up. But what about all those other little esoteric goodies in the library?

One of the more confusing features that I constantly get hung up on are SASS and Compass’ colour functions. The idea of building a completely dynamic colour palette with only a few variables gets me all hot and bothered, but in practice, it’s incredibly difficult to a) remember the possible modifiers, and b) visualize what each of the modifiers actually do.

Thanks to Jackie Balzer’s beautiful interactive guide, the mystery is over. I’m about to get a lot more lazy with my colour variables.

Visit the guide.