Variable values can cascade like other CSS properties. So, you could define a theme via a set of variables, and redefine those variables in a CSS class ("selected items look like this"), or a media query ("mobile uses this theme"), or via JavaScript. That requires evaluation in the browser.

Preprocessors evaluate CSS and the cascade so there's nothing stopping them from adding local scope or specificity to variables. On the other hand, if you can really edit variable values with Javascript then that would be client-side only, although I haven't seen anything that says you _can_ do that - for all we know Javascript may only allow getting/setting of the evaluated value, not the variable expression itself.

> Preprocessors evaluate CSS and the cascade so there's nothing stopping them from adding local scope or specificity to variables.

That cascade depends on the structure of the document, not just the CSS. For instance, consider the following (contrived) example:

    :root { var-accent: black; }
    .someclass > :first-child { var-accent: blue; }
    .otherclass { background-color: var(accent); }
    .anotherclass :first-letter { color: var(accent); }

The value of var(accent) for any element depends on whether the ancestors of that element include the first child of an element with class="someclass". For a preprocessor to duplicate that effect on the server side, it would need to construct all possible combinations of the selectors for the variables and the selectors depending on those variables:

    .otherclass { background-color: black; }
    .anotherclass :first-letter { color: black; }
    .someclass > :first-child .otherclass { background-color: blue; }
    .someclass > :first-child .anotherclass :first-letter { color: blue; }

Now consider that with a dozen variables and a hundred variable-dependent rules.

> On the other hand, if you can really edit variable values with Javascript then that would be client-side only, although I haven't seen anything that says you _can_ do that - for all we know Javascript may only allow getting/setting of the evaluated value, not the variable expression itself.

The CSS Variables spec talks about dynamic variable updates via scripting.

A simple example:

   div { var-color: red; }
   p { var-color: blue; }
   section a { color: var(color); }

It is not possible to generate a non-variable version of the CSS without either knowing the structure of the DOM or generating every permutation of selectors (you can imagine how unwieldy this could get). Even if you manage to do this you're changing the specificity of the rules.