Wow, this is very interesting that they didn't go down the LESS/SASS route of file-level "global" variables, but instead chose to bind variables to elements and their descendents themselves.<p>Coming from LESS this seemed strange at first, but upon reflection it makes a ton of sense, and provides for fantastic flexibility.<p>Now to really make this useful, we just need mathematical operators for distance values (12px - 2px) and functions like darken() and lighten() on color values... or is that being proposed somewhere too?
This is all I need:<p><pre><code> :root{
var-myforecolor: red;
var-mybackcolor: blue;
}
h1{
color: $myforecolor;
background: $mybackcolor;
}
</code></pre>
This covers 80% of all cases, leaving parent-vars and cascading-vars as edge cases. Good to have them just in case.<p>Bring it on!
I really wish they'd spend some time building a standard for how things are supposed to appear in the browser, lessening our need for normalize.css and reset.css.<p>Then, if browser makers didn't implement appearances the same way, we could point to the standard and ask why.
I'm glad $foo syntax was reserved for future flexibility in usage. When CSS level 4 is ratified in 2057, we'll all be thankful there was this kind of oversight and level-headedness now.