CSS Variables in Firefox 31 – new syntax

[bshimmin]

That new syntax is astonishingly ugly and bizarre.

I'm sure it'll be a real joy to use that for anyone who's been using Sass or Less (and who doesn't, these days...).

[galvin]

Yeah, obviously they need to avoid conflicts but surely they could have found a single character to use as a prefix instead of "--", like "$" or "@".

The "var()" function is just.. redundant. Or maybe I'm missing something?

[ibotty]

`--` is a comment in many languages (sql, haskell, ..).

[sergiotapia]

Does the W3C not have internet access to learn about existing solutions and least try to emulate the good parts?

LESS and SASS are much better about variables, what the heck were they thinking?

    background-color: var(--best-gray-ever);

Not exactly intuitive or easy to parse at a glance.

[paulrouget]

> what the heck were they thinking?

I don't know, maybe about how to design a spec that is compatible with past and future CSS parsers and features?

People think it's so simple to come up with a new feature for CSS/HTML/JS, when actually, they have no idea how difficult it is.

They're smarter than that: http://www.xanthir.com/blog/b4KT0

[ep103]

The w3c has been failing at their job for some 15 years now. Enabling drm in html5 and giving the mpaa a seat on their board should have been the last straw. Ignore them, and start looking to WhatWg

[pornel]

These are not like SASS variables. I think calling this variables is causing unnecessary confusion.

This feature adds custom properties. CSS had custom vendor properties like `-webkit-foo`, and now you can have your own properties with vendor == "", so it's `--foo`.

[bshimmin]

I think this is just a problem of nomenclature. In CSS, a statement such as

  font-color : red;

comprises a "property" (left) and a "value" (right). The draft W3C proposal allows you to specify a "custom property" and assign a value to it, thus:

  --header-bg-colour : #ff5533;

You can then reference this elsewhere by saying:

  header { background-color : var(--header-bg-colour); }

Isn't that just how you use a variable (written as $header-bg-colour) in Sass?

[peaton]

So in this article, the author says this is not supported on chrome. But in this stack question [1], chrome is clearly using it. Is the only difference the author is discussing that now firefox uses/supports "--" instead of "var-"?

[1] http://stackoverflow.com/questions/18466569/enable-experimen...

[artursapek]

It was removed from Chrome in February. https://groups.google.com/a/chromium.org/forum/#!topic/blink...

[peterjmag]

CSS variables were recently removed from Chrome: http://stackoverflow.com/a/23518831/349353

[nfriedly]

I like it. The syntax actually feels more css-like to me than what most preprocessors use. But never mind the syntax, the killer feature us the cascading - that's what sells me on this vs SASS/LESS/etc. (And, having it native is also nice - this way I can just dump something on Github Pages and skip the compilation step.)

[talmand]

Can you suggest a use-case where the cascading variables is a helpful thing?

[arxpoetica]

Can anyone think of a use case for this beyond what a precompiler (Sass, Less, Stylus) can do?

[lambda]

For one, it means that you don't need to have a precompiler step in the development process. You can more easily edit the value inline in your browser's developer tools. You can more easily put together simple static sites.

Another is that you can use it in conjunction with calc(), which you can't do in a preprocessor. Take a look at some example use cases for calc, which can't be done in a preprocessor: http://css-tricks.com/a-couple-of-use-cases-for-calc/ Now instead of just using constant values in those, you can use variables. This can be even more powerful for responsive designs, because you can set the variable to different values based on a media query.

[epidemian]

I couldn't think of a very good example, but here's something: http://codepen.io/anon/pen/vuyAI

The CSS use a couple of custom properties that define the foreground and background colors. Then, some elements redefine those custom properties (through CSS or JS) and that in turn makes all their children inherit the new custom properties' values and change their styles. This makes the rules that use the custom properties very general, and avoids the need to write more specific rules for the alternative colors. I hope this makes sense :)

I don't think this is possible to do with CSS preprocessors.

[bshimmin]

I think the idea is you use this rather than a precompiler.

[silverbax88]

Because precompilers are sort of a disruption of the point of CSS to begin with. I know, I know, a lot of people use them, but using style sheets that require compilation pretty much defeats the purpose of separation.

[rubiquity]

Woah. CSS variables look like compiler flags. There goes the W3C reinventing the wheel when Sass, Less and others have already laid out how to assign variables just fine for years.

[gavinpc]

As other posts have stated, CSS variables are not the same thing as preprocessor variables. Specifically, they cascade.

A preprocessor cannot possibly implement CSS variables with cascading because it the value is resolved against a live context.

In other words, you can actually change the variable at runtime with rules that target different selectors.

As such, the "variables" are in fact functions.

[AshleysBrain]

Why do you have to use var(--name) when the parser already knows it's a variable from the -- prefix? Surely property: --name; is nicer than property: var(--name); ?

[ihuman]

Does anyone know if the var() function only work with the variables? For example, can I do something like:

  background-color: var(color);?

[bouncingsoul]

In case you didn't know, there's already a special version of the `inherit` keyword for using the color value in other properties:

    background-color: currentColor;

Fully supported in all modern browsers. http://devdocs.io/css/color_value#currentColor_keyword

[ahoge]

Doesn't work.

http://jsfiddle.net/QEJw9/

[jasonpriestley]

Writing your styles in javascript is a better option. You get variables, as well as functions and modules (e.g. with browserify), all with sane syntax and semantics (no "cascade").

Preprocessors are an inferior solution, limited by the semantics of CSS and leading, by the pervasive use of macros, to needlessly large CSS file sizes.

[VMG]

What's the best solution for writing styles exclusively in JS and avoiding CSS completely?

[kuschku]

And does your styling work in a webbrowser where JS is disabled?

[chenglou]

https://github.com/chenglou/RCSS

[est]

I'd rather use reactjs to style everything than this.

[joesb]

That doesn't make sense.

[Thiz]

Ugly as hell. Go back to the drawing board.