I don’t know if the information’s useful, or indeed accurate, but I believe that an individual named Nathan Weizenbaum was an intern at FogBugz recently? I’m pretty sure that’s the same Nathan Weizenbaum who is the lead developer of SASS. And indeed, the DRY-up-your-HTML template language HAML.
SASS 3.0 is at (I think) RC3 right now, with changes that include a new (“SCSS”) syntax that make it a superset of CSS 3. At least, that’s what they say - I haven’t actually tried it yet…
Jeff, I thought you were a programmer! Why don’t you use HTTP Handlers to create the CSS dynamically from values in your DB? Of course use caching as much as possible. I would have one static style that has the least common denominator across all sites and a second one built dinmically with what I’ve mentioned above.
You can also use Bundler http://github.com/jetheredge/bundler
It can minimize and compress multiple javascript and css files and also suports .less. It is open source.
I heartily agree… I have long though CSS should have variables. And math with those variables. I don’t know what these language designers are thinking leaving these out. And is inheritance of some sort too much to ask?
Unfortunately, these conversion layers you’ve listed don’t address unit conversion: if I want something to align with two blocks, one of X em and another of Y px, then I want X em + Y px, but only the browser will know what that value is. Especially if one of these blocks is based on % instead! So then we wind up with pixelized fixed-size layouts instead, undoing so many of the goals of flowing web page design and font size/resolution independence 
Nice article and I feel your pain.
Whilst Less and SASS solve some problems you still need that deep understanding of CSS to make it work well, something that not all developers have the time to acquaint themselves with.
What we need is a jQuery for CSS :), something that abstracts away the pain points such as CSS behavioural differences between browsers for most tasks, but at the same time allows low level CSS knob twiddling when required.
In short, CSS violates the living crap out of the DRY principle. You are constantly and unavoidably repeating yourself.
Oh, please. Maybe repetition is convenient for you or your designers, but it’s hardly unavoidable: http://stackoverflow.com/questions/47487/create-a-variable-in-css-file-for-use-within-that-css-file/47508#47508
As you’ve probably already learned, there are only about a gazillion CSS-templating solutions available to solve these problems.
There’s even one implemented in Groovy, I think it’s called GSS.
You probably use some sort of templating language to generate HTML. Using templates to generate CSS is just an obvious extrapolation.
Jeff, you should check out CssHandler, an IIS handler for CSS that allows use of variables, server-side processing of @import directives and some other neat things: http://csshandler.codeplex.com/
Short of having all this stuff implemented in CSS itself it would be nice to see a either Less CSS or SASS implemented in Java, .NET, PHP etc etc, so they can be taken advantage of no matter what platform you are running on. (Although, yes of course there’s no real reason why you couldn’t run a Ruby server for generating CSS as well as a whatever your application is built on.)
I’ve been using .Less CSS (.NET) for a while and love it. LESS syntax is really convenient & they’re actively maintaining the project.
.LESS is awesome.
In this case, put all of your global and/or structural CSS in a “Core” file that all sites get. Then, each site get’s it’s own “brand.less” file with specific colors. If you’re good, each brand.less file would only have variables and mix-ins.
I’ve been using LessC for a while now, and the nesting expressiveness has made a frackload of difference.
That said, when I’m working with the transition to a mobile space, the scary part is the way one must master the cascade and know the specificity rules. “@mobile #some-item” and “@landscape #some-item” will have different specificities that can be exploited by the appserver developer, but learning those rules is daunting… and now necessary.
Ok here are my points on css:
Other folks have pointed to it already, but you should check out dotless. The t4 templates can auto-run when you save the .less file to compile the .css files, so there’s no additional step - you just write your .less file and it just works.
typo: excerise
Has Perl become some sort of old-schooler’s arcana? 
I’ve recently used Text::Template ( http://search.cpan.org/~mjd/Text-Template-1.45/lib/Text/Template.pm ) to great effect with the styles for a documentation site I’ve been working on. After writing a small driver program to mesh the template with the data, the result isn’t so different-looking than the examples here.
However, nothing beats direct browser support. Text::Template helped me a great deal while I tweaked my color scheme, but it was still lame that I had to run make after each change. Maybe I’ll wire Apache up to do it for me sometime…
Two attempts for adding a little horse power to CSS that didn’t end up flying:
There’s a point of view that states that it’s a good thing these technologies didn’t catch on. It’s probably true, especially where print applications are concerned. I assert, though, that it wouldn’t take a Turing-complete language to evaluate an expression like top: ((#outer@height - @height) / 2) - 150px, and I have written more pages than I care to remember that would have benefitted impressively from that kind of evaluation.
It would even still be somewhat friendly in situations where scripting is disabled or unavailable (unless non-geometry-related functionality crept in, but browser developers aren’t known for that sort of unscrupulous behavior, right?).
There is also CSSTidy which does something similar to less and consolidates common style rules .
You can try it out online at http://www.codebeautifier.com.
As a front-end developer that spend most of his time in CSS I personally don’t see the use of calculated colors and variables. It’s not as if the values are going to change. Example:
.class { color: red + #111; }
…is always going to be interpreted as
.class { color: #880808; }
So just type out the calculated hex value and save your computer a half a millisecond on hexadecimal math.
And as for variables, CSS doesn’t have them because nothing in CSS actually varies. If you have a variable for a certain shade of ‘blue’ then what you actually have is a CONSTANT. And if you want to apply it to a large number of different types of elements then you should focusing on your selectors and inheritances more closely.