
CSS Variables landing in Chrome 49 - wanda
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care
======
mendelk
For those commenting about SASS having this forever etc, note that this goes a
step further:

    
    
        :root { --color: blue; }
        div { --color: green; }
        #alert { --color: red; }
        * { color: var(--color); }
    

You can't accomplish that with SASS today. More info [0].

In fact, this feature isn't even covered with cssnext:

    
    
        The current transformation for custom properties aims to provide a future-proof way of using a limited subset (to top-level :root selector) ... [1]
    

I'm very curious whether or not this paradigm will be accepted as "best
practice", or how it will be used.

[0] [https://developers.google.com/web/updates/2016/02/css-
variab...](https://developers.google.com/web/updates/2016/02/css-variables-
why-should-you-care#the-cascade)

[1] [http://cssnext.io/features/#custom-properties-
var](http://cssnext.io/features/#custom-properties-var)

~~~
wanda
Don't forget that CSS Variables can also be used within media queries.

~~~
masklinn
And if you change a CSS variable in JS, it will recompute all of its uses.

------
TazeTSchnitzel
They're already enabled in Firefox, and they'll also be supported in the next
version of Safari.

I'm going to use these to allow changing the appearance of my app, which has a
Windows 95-style UI. 95 has many customisable values that determine how the UI
looks (fonts, font sizes, font styles, foreground and background colours, UI
element sizes, etc.) that it stores in certain registry keys and that the user
can change from the Display control panel applet. In my app, I'll be using CSS
variables in place of registry keys.

~~~
jordache
you are using reg keys to store properties? is it a chromium app?

~~~
dEnigma
He was just explaining how it worked in Windows 95, he will be using CSS
variables instead.

~~~
TazeTSchnitzel
She, and yes, that's the idea. I couldn't explain it very clearly.

~~~
dEnigma
Sorry, I always default to the male form for some reason.

------
SwellJoe
I've wondered for years why we're using pre-processing to get variables into
CSS. Given that there hasn't been a commonly advocated workflow that didn't
include some sort of CSS processor (like LESS or SASS) in about a decade, it
seems like somebody working on the standards would have realized that CSS
needed variables, at the very least. So, it's cool that it's coming, though
it's taken a lot longer than I reckon it probably should have.

I would normally say, "But, at least there's been time to work out the syntax
in non-core projects, so things are probably nice now." But, this syntax and
behavior doesn't even resemble SASS or LESS. Is there some other tool out
there that provides variables in CSS that this is modeled after? Why reinvent
the wheel when so many people are already familiar with and have worked out
the quirks in SASS or LESS?

Reading the explanation for why they went this way (in short, because these
are nothing like SASS variables, in the sense that SASS is more like a macro):
[http://www.xanthir.com/blog/b4KT0](http://www.xanthir.com/blog/b4KT0)

Is somewhat unconvincing. Why not implement what's already working for people
in SASS/LESS (in the way it's already working), and then move on to whatever
it is they've implemented here later once it is clear it's something people
want/need and once it's been worked out in pre-processors? (I don't think I
quite grasp the entirety of the difference, either...is it merely a matter of
scope and composability?).

Actually, someone in the comments maybe sums it up:

 _" In fact, let me see if I've got this straight in my head:

CSS preprocessors added a feature called variables, but which would more
accurately be described as macros.

Browser vendors and the working group worked sporadically on an in-browser
implementation and standardisation of this macro feature, and they also called
it CSS variables.

The WG's focus shifted to a feature more akin to custom properties, but which
retained the name CSS variables.

So, right now we have CSS variables in preprocessors, which are macros, CSS
variables in browsers, which are custom properties, and maybe at some point in
the future, macros in the browser, and actual variables in the browser."_
(Source:
[http://www.xanthir.com/b4KT0#4KT0-13](http://www.xanthir.com/b4KT0#4KT0-13) )

~~~
nailer
The CSS team has people like this, who no longer make websites:
[https://www.w3.org/People/Bos/CSS-
variables](https://www.w3.org/People/Bos/CSS-variables) Thus they're
disconnected from current web developers.

Meanwhile Smashing says something like 77% of audience uses SASS.

~~~
stupidcar
Ah, Bert Bos, the W3C's "style activity lead". What a joke.

He's the guy who wasted a decade writing an ASCII-art based "template layout
module"[1], which he was never able to persuade a single browser vendor to
implement. It eventually got demoted from a working draft to a "note", which
is the W3C's polite term for standards fanfiction.

His other major achievement is putting his own photo on every one of the CSS
working group's web pages. I'm not joking:
[https://www.w3.org/Style/CSS/#endmatter](https://www.w3.org/Style/CSS/#endmatter)
.

And let me tell you tale of that photo/byline. It originally appeared on the
working group's crappy 1990s site, which persisted until the late 2000s
(because that's how fast things move at the W3C), and you could kinda forgive
it as one of the dumb things people put on dumb 1990s websites.

Anyway, eventually it became too embarrassing that the working group
responsible for CSS had such a shitty site, and some other members of the
group took it upon themselves to produce a shiny new design with useful
content, but sans Bos' photo. This done, they submitted what they'd come up to
the W3C. Eventually, it showed up on the W3C's servers but, surprise,
surprise, it had been rather mangled, and Bos' photo was back, clumsily shoved
into a footer where it hadn't originally been.

It's a small, petty thing, but all the more hilarious for it. God knows how
that guy still has a job at the W3C. Maybe he's best friends with Tim Berners-
Lee, or something?

[1] [https://www.w3.org/TR/css-template-3/](https://www.w3.org/TR/css-
template-3/)

~~~
stupidcar
To be fair though, I should also say that nowadays the CSS working group has a
lot of very smart people who absolutely understand the needs of web
developers/designers, and have been tireless in getting things like Flexbox
specced and implemented across different browsers.

CSS is about a decade behind where it should be, but that's not the fault of
the people working on it now. And I think its future is actually comparatively
bright, especially with the Houdini project taking off.

------
ry_ry
custom props beginning with 2 dashes is slightly annoying given the BEM syntax
has already grabbed that as Modifier...

    
    
      .foo {
        &--bar {
          --bar: 0;
        }
      }
    

It's a pretty contrived example, but akward to comprehend at first glance.

------
givan
The syntax is verbose and ugly compared to SASS

~~~
colinramsay
I think a lot of people agree with you but there is a reason:

[http://www.xanthir.com/blog/b4KT0](http://www.xanthir.com/blog/b4KT0)

~~~
frik
Stupid decision, the should have used $foo (dollar sign for variables) like in
Perl and PHP. It remind me decisions of standards based on XML (XLST, XML-
Schema, RDF, etc).

~~~
esailija
Read the linked post. Css variables are nothing like macros like sass's `$foo`
and css might support macros with sass's `$foo` syntax in future.

~~~
frik
I _read_ the article, that's why I commented because "might support something
in future" that probably never happens, is what I related to XML based formats
design decisions go wrong. Argh, but thanks for misunderstanding and
downvotings.

------
supernintendo
Ok, that's cool. How long until we're able to use this and not have to worry
about browser incompatibilities?

~~~
achairapart
You can use it today with the help of [http://cssnext.io](http://cssnext.io)

~~~
andrewingram
You can use a limited subset. cssnext isn't magic, it's purely a source
transformation, there's no runtime. It can't handle the dynamic part of css
variables.

~~~
TabAtkins
Yeah, CSSNext here is basically the intersection of CSS variables and Sass
variables - you can only use them in property values (like CSS), and you can
only declare them at top-level (like Sass).

It's nice if you really want to utilize the current syntax, but it's less
powerful than either option it's derived from.

------
bsimpson
Well, that was a long time coming. I was playing with a beta version of CSS
Vars 4+ years ago, which was then removed and eventually replaced with this.

------
hanniabu
I'm not a fan of this...

/* JS */ var styles = getComputedStyle(document.documentElement); var value =
String(styles.getPropertyValue('\--primary-color')).trim(); // value = 'red'

Rather than calling '\--primary-color', you should really be able to call
'color' which points to the variable and will still return red. Otherwise
you'll have to know the name of each variable being used, which is much more
difficult than knowing the property.

~~~
spankalee
Variables are ultimately used somewhere to set a property, with something like

    
    
        color: var(--primary-color);
    

If care about that property, and not the variable, then get it as usual:

    
    
        let value = styles['color']; // 'red'

------
ape4
Is there a way to access it from javaScript? Can JS code set CSS --color and
make it change.

~~~
saulr
It looks like this can be changed with `setProperty`. There's a demo[1] that
works on Firefox 31+ and Chrome 49+

[1] [https://www.broken-links.com/2014/08/28/css-variables-
updati...](https://www.broken-links.com/2014/08/28/css-variables-updating-
custom-properties-javascript/)

~~~
ape4
Thanks. I wonder if it could be creatively misused to act as a database.

------
Negative1
Why don't they just natively support realtime compilation of SASS/LESS?

~~~
ry_ry
the performance would be horrible.

------
lcnmrn
Just add native support for Sass and call it a day.

~~~
EugeneOZ
SASS encourage developers to build long chains of selectors and it makes them
brittle and non-reusable.

~~~
ry_ry
Yeah, it's easily abused and trivial errors of judgement create non-trivial
problems later down the line.

IMO part of the problem is that nested LESS/SASS looks _just enough_ like JSON
to mislead inexperienced devs, who often try to treat the nested structure as
an object, rather than thinking of it as a string-builder.

It invariably ends up creating huge swarths of pointless specificity and
stylesheet bloat.

