For those commenting about SASS having this forever etc, note that this goes a step further:<p><pre><code>    :root { --color: blue; }
    div { --color: green; }
    #alert { --color: red; }
    * { color: var(--color); }
</code></pre>
You can&#x27;t accomplish that with SASS today. More info [0].<p>In fact, this feature isn&#x27;t even covered with cssnext:<p><pre><code>    The current transformation for custom properties aims to provide a future-proof way of using a limited subset (to top-level :root selector) ... [1]
</code></pre>
I&#x27;m very curious whether or not this paradigm will be accepted as &quot;best practice&quot;, or how it will be used.<p>[0] <a href="https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;updates&#x2F;2016&#x2F;02&#x2F;css-variables-why-should-you-care#the-cascade" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;updates&#x2F;2016&#x2F;02&#x2F;css-variab...</a><p>[1] <a href="http:&#x2F;&#x2F;cssnext.io&#x2F;features&#x2F;#custom-properties-var" rel="nofollow">http:&#x2F;&#x2F;cssnext.io&#x2F;features&#x2F;#custom-properties-var</a>