:root { $header-color: #06c; } h1 { background-color: $header-color; }
(Note that the spec's use of the :root pseudo is just to generically declare "global" variables that should apply to the whole page. If you're just using HTML, feel free to use "html" or "body" as the selector instead.)
I'm guessing the justification for the existence of the awkward var(varname) version is so that you can also have the parent-var(varname) notation.
I do think it's interesting how variables are scoped to dom nodes. Is there any reason it cannot be optional though, so if you omit it, it defaults to global?
$header-color: #06c; h1 { background-color: $header-color; }
I'm guessing the argument against, is that this requires too much of a change to CSS parsers, as it doesn't follow the standard form of <selector> { <properties> }. If that's really the reason it seems a bit of a shame though :/
:root{ def-primarycolor: blue; }
.x{ background-color: $primarycolor; }