HN Explorer

11 comments

[ 3.4 ms ] story [ 51.9 ms ] thread
Kilimanjaro
This is all I need:

    :root{
        var-myforecolor: red;
        var-mybackcolor: blue;  
    }

    h1{
        color: $myforecolor;
        background: $mybackcolor;
    }
This covers 80% of all cases, leaving parent-vars and cascading-vars as edge cases. Good to have them just in case.

Bring it on!

bkardell
Comments to the author/editor of the draft and w3c itself are best directed on the blog itself.
Steuard
Careful: as I understand it, the main point of this blog post is that they're going to update the spec to require, e.g., "color: var(myforecolor)" rather than "color: $myforecolor".

(The rationale seems sensible to me, for what it's worth.)

[deleted]
(comment deleted)
bkardell
Yes, one of the primary things to realize is that this is not preprocessor style... its more like custom properties and a function for accessing the values of custom properties - in css, respecting everything else about css.
crazygringo
Wow, this is very interesting that they didn't go down the LESS/SASS route of file-level "global" variables, but instead chose to bind variables to elements and their descendents themselves.

Coming from LESS this seemed strange at first, but upon reflection it makes a ton of sense, and provides for fantastic flexibility.

Now to really make this useful, we just need mathematical operators for distance values (12px - 2px) and functions like darken() and lighten() on color values... or is that being proposed somewhere too?

bryne
I'm glad $foo syntax was reserved for future flexibility in usage. When CSS level 4 is ratified in 2057, we'll all be thankful there was this kind of oversight and level-headedness now.