Firefox 31 And The New CSS Variables Syntax: WTF?

Firefox has supported CSS variables since version 29 and at present, no other browser supports them. In version 31 of Firefox, Mozilla are once again first to implement the latest working draft from the W3C for CSS variables. You can read the post about the addition to Firefox here.

All I have to say is, who the hell over at W3C came up with the syntax? I am very disappointed that the syntax doesn’t follow that of another language like, I don’t know, Javascript or perhaps you know, implemented similar syntax to that of Sass or Less.

This is how variables are defined (code taken from linked article):

            :root { --some-variable: somevalue; }
        body { property: var(--some-variable); }
    

What. The. Fuck.

Whoever thought it was a good idea to declare variables using double-dashes should be ashamed of themselves. And then to throw more batteries on the fire, to use the variable you just grudingly defined, you have to get the value calling some weird method called var

I’d like to clarify that all Mozilla have done here is implemented the W3C working draft (good on them for being current), but the syntax itself is just painful to look at. It’s like the sound of chewing, the sound of chewing makes me angry. The site of CSS variables like this makes me angry.

Learn from CSS Pre-processors

Correct me if I am being ignorant here, but is there any logical reason that variables need to be this way? Can we not learn from pre-processors like Sass (which in my opinion has a great syntax for many things).

Could the W3C not have made it so you can define variables like below?

            $someVariable: somevalue;
        body { property: $someVariable; }
    

This is how it should be done. I don’t know what they’re smoking over at the W3C, but whatever it is, they need to cut down… Maybe I am just overreacting, until CSS gets to a point where I can replace the function of a pre-processor, I won’t be using native CSS variables.

As I pointed out, Firefox is the only browser that supports CSS variables, as you can see from this Caniuse CSS Variables table, they’re not even worth implementing.