[mekishizufu]

The downside of this (unless I'm missing something) is that these variables need to be evaluated on the client side and inevitably slow down CSS processing (at least for the first time that is). I really like the fact that you can preprocess both LESS and Sass (and others) to just plain CSS and hide all of the dynamic behavior (far more then just variables).

[Drakim]

If the variables are constants, there shouldn't be any slowdown. The browser could just inline replace the variable references with the actual values in it's own internal representation.

[jdmichal]

They are not. The values can be redefined following the same CSS cascading rules as everything else.

[Drakim]

But that's redefined as new constants again right? The internal representation of the CSS inside the browser would just need to update the inlined values.

[jdmichal]

Yes, and by the time it's done doing that, you basically have a CSS processor that does all the cascading rules. Or, you could just use the CSS processor you will already be running on the same file. The whole point is that just inlining a constant value with a preprocessor will not work, because the values follow CSS rules.

[Drakim]

No, the point here is that there will be no slowdown, because the browser doesn't need to reparse the entire CSS document every time it needs to refer to that variable value, or anything like that.

It reads over the definitions ONCE (with all the CSS hierarchy and such), and then establishes it's own internal constant value for that variable. Referring to that value will be no more expensive than referring to a value that is set by the CSS sheets like "FF55FF".

[jdmichal]

There is no singular value for a variable. (Otherwise they would be constants, not variables.) Here's an example:

    :root, .green.applyColor {
        var-color: #00FF00;
    }
    .red.applyColor {
        var-color: #FF0000;
    }
    .blue.applyColor {
        var-color: #0000FF;
    }
    .applyColor {
        color: var(color);
    }

With this style sheet, items with the "applyColor" class will default to green, unless they also have the class "blue" or "red", in which case the color will switch appropriately.

So how, exactly, is a CSS processor supposed to read this definition once and come up with a single internal constant for the variable "color" that can be looked up in constant time? And how does that offer any advantage over just using its already-programmed cascading rules to properly resolve "var-color" whenever it encounters "var(color)"?