[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)"?