Are variables useful or redundant in CSS?

Question

I've seen a lot of ways of adding variables in CSS (e.g. SASS and LESS).

What are the pro and cons of changing from this:

#div-one, #div-two {
    color: blue;
}

to this:

@default: blue;

#div-one {
   color: @default;
}

#div-two {
   color: @default;
}

Answer 1

Using variables in CSS like this definitely makes the code more readable and maintainable. Also, it is a nice example of the DRY principle. Although in this case combining the two into one might be better (assuming @default is used more than once).

@default: blue;
#div-one, #div-two {
    color: @default;
}

Answer 2

AFAIK, CSS variables are not part of the standard. It's a feature request
I've read somewhere that the latest versions of WebKit may understand that.

But in short, don't use this. Even I it's pretty cool, as you can define global values, most of the currently-used browser won't understand this.

I don't know about SASS or LESS, but I can see this is Ruby stuff, that need to be installed.
So I don't think it's a compatible solution either.

Answer 3

Generally pretty useful, for example, they are used with SASS: http://sass-lang.com/