Variables in CSS3 without pre-processing

Finally, one of the big guys on the web-browsing scene implemented custom variables in CSS3 without pre-processing. Firefox 31 enabled usage of any custom variables directly in your browser if you declare them in the :root.

:root {
    --main-text-color: orange;
}

#foo {
    color: var(--main-text-color);
}

Check out the sample code on jsfiddle here to see it in action.

This is just a glimmer of hope so developers will not need additional tools and extensions to their development environments.  Firefox had it as a functionality, which you had to switch on to use it in version 29. Now, everyone has it on by default.

At this point (October 31, 2014) though, IE, Chrome, and Edge, are still behind and do not support custom variables. I expect them to start an argument of the syntax soon. You should probably still use LESS or SASS and pre-process your variables.

So, do not use it yet.

UPDATE (June 20, 2016)

Now, Chrome support the feature as well.