[nickand]

Redundant functionality to JavaScript is redundant. That being said I'm all for designers having baby steps they can use to simulate some of the functionality of JavaScript. After all the days of the one line of JavaScript that does that cool effect are over now that you aren't cool if you don't use prototypes and 'modules.' JavaScript is getting to the point where if you don't use at least 3 libraries to make your onclick event handler you get publicly lambast.

Also who says you need to copy the color every time you use it?

This is how it works. If you have one important property that you want to change everywhere then you use the most specific target class necessary for each of those classes in a comma separated list attached to only that property then you can change them all later or add new classes to them.

.class, .anotherClass, .yetSomeOther .moreSpecificTarget {color:blue;}

Also if you want to simulate if / then statements then you write your most general classes first followed by your more specific classes. So:

.blue {color:blue;}

.blue.darker {color:rgb(4,4,179)};

It's even better than a conditional. It's a switch.

[nostrademons]

That's not the case for variables. The case for variables is when you have a set palette for the site, and you want the border of some elements to match the background color of other elements to match the text color of still other elements. Or you want to set padding on a set of classes, but then want to set the width of your left column to be some chosen value minus the padding of the center column. Or you want to flip your layout in RTL languages so that everything is reversed.

CSS won't let you do any of this natively.

[nl]

I think it's fair to say that people at Google do actually know this is possible.

.class, .anotherClass, .yetSomeOther .moreSpecificTarget {color:blue;}

That's no better, because you have to duplicate your selectors. You end up with stuff like:

.class, .anotherClass, .yetSomeOther .moreSpecificTarget {color:blue;}

.yetSomeOther .moreSpecificTarget {border: pink solid 1px;}

.anotherClass, .yetSomeOther {margin: 5px;}

.yetSomeOther .moreSpecificTarget {margin: 1px;}

Basically if you follow this model you have to have a line for every single property you want to style. It's unmaintainable, and increases the size of your CSS files.