Dynamic CSS Goop

I've been on a bit of a CSS quest lately (think Jason, Argonauts, white whales). Inspirations include Nicole Sullivan's larval Object Oriented CSS and Chris Eppstein's Compass. Like the lion an the tin man each has its strength but they really need each other. It's encouraging that Chris answered my recent plea for philosophical coherence by actually implementing an experimental OOCSS pattern in Compass.

At the core of Compass' goodness is Syntactically Awesome CSS or SASS. The big thing about SASS is it gives CSS real programming language features like variables and expressions and macro substitution. That stuff is critically important. I remain on the fence however as to whether we need another programming language (SASS) to achieve it. Right now, instead of SASS this site is using Ruby ERB templates to render its CSS (dynamically).

The value of this approach is there's one less language to learn if you already know Ruby and ERB. The downside is that the ERB code might be a little more verbose than the equivalent SASS. Here's an example:

.button {
 background-color:<%= @c_a %>;
 color:<%= @c_a_w4%>;
 border:1px solid <%= @c_a_k4%>;
 }

You can see that we're using plain old Ruby variables to define our CSS colors for a button. The equivalent SASS wouldn't have the ERB goop around the variables but I'm willing to pay for Ruby's familiarity and power with a little extra goop.