<story><title>CSS Variables in Firefox Nightly</title><url>https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/</url></story><parent_chain></parent_chain><comment><author>pornel</author><text>Please note that CSS Variables are not like SASS&amp;#x2F;LESS variables. They&amp;#x27;re actually &lt;i&gt;custom properties&lt;/i&gt; that obey inheritance.&lt;p&gt;They&amp;#x27;re scoped to document rather than stylesheet, so you can override them in parts of the document just like you can override any CSS property.&lt;p&gt;Example from the spec:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    :root { var-color: blue; }
    div { var-color: green; }
    #alert { var-color: red; }
    * { color: var(color); }

    &amp;lt;p&amp;gt;I inherited blue from the root element!&amp;lt;&amp;#x2F;p&amp;gt;
    &amp;lt;div&amp;gt;I got green set directly on me!&amp;lt;&amp;#x2F;div&amp;gt;
    &amp;lt;div id=&amp;#x27;alert&amp;#x27;&amp;gt;
      While I got red set directly on me!
      &amp;lt;p&amp;gt;I’m red too, because of inheritance!&amp;lt;&amp;#x2F;p&amp;gt;
    &amp;lt;&amp;#x2F;div&amp;gt;&lt;/code&gt;&lt;/pre&gt;</text></comment>
<story><title>CSS Variables in Firefox Nightly</title><url>https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/</url></story><parent_chain></parent_chain><comment><author>bbx</author><text>CSS variables are the only reason I started using Sass and LESS in the first place. But although these preprocessors come with other interesting features, I never managed to truly incorporate them in my workflow.&lt;p&gt;The way I ended up solving the CSS variables issue (i.e. replacing the same property&amp;#x2F;value combination in multiple locations) was to actually regroup &lt;i&gt;selectors&lt;/i&gt;.&lt;p&gt;For example, I&amp;#x27;d have:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  #title,
  .nav a,
  .post-title em {
    color: #db4e44;
  }
&lt;/code&gt;&lt;/pre&gt;
The only annoying thing is that it can result in a long list of selectors (although I&amp;#x27;d put them on one line anyway). But one thing I truly appreciate with this approach is that you can edit &lt;i&gt;any&lt;/i&gt; value with your browser&amp;#x27;s inspector, and see it &lt;i&gt;instantly&lt;/i&gt; update all instances at once. It&amp;#x27;s great to test out new colors for example.&lt;p&gt;The other option would be to have a specific class that would apply this style. But then, you&amp;#x27;d move the styling from the CSS to the HTML, and I&amp;#x27;ve always tried to prevent myself from breaking this golden rule.</text></comment>