4 ms·

W3C Decisions on CSS Variables (Accepting Comments)

26 points by bkardell 14y ago

Kilimanjaro 14y ago
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 14y ago
  Comments to the author/editor of the draft and w3c itself are best directed on the blog itself.
- Steuard 14y ago
  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.)
  - bkardell 14y ago
    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.
  - deleted 14y ago
    [deleted]
crazygringo 14y ago
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?
- bkardell 14y ago
  calc() is coming.
- TabAtkins 14y ago
  As bkardell said, math is in CSS now with calc() http://dev.w3.org/csswg/css3-values/#calc-notation http://dev.w3.org/csswg/css3-values/#calc-notation Color manipulation will be in Colors level 4, whenever I get the time to work on it (probably early next year).
drivingmenuts 14y ago
I really wish they'd spend some time building a standard for how things are supposed to appear in the browser, lessening our need for normalize.css and reset.css. Then, if browser makers didn't implement appearances the same way, we could point to the standard and ask why.
- TabAtkins 14y ago
  We already have this: http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#rendering http://www.whatwg.org/specs/web-apps/current-work/multipage/...
bryne 14y ago
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.

26 points by bkardell 14y ago

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 14y ago
Comments to the author/editor of the draft and w3c itself are best directed on the blog itself.
Steuard 14y ago
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.)
- bkardell 14y ago
  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.
- deleted 14y ago
  [deleted]

crazygringo 14y ago

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?

bkardell 14y ago
calc() is coming.
TabAtkins 14y ago
As bkardell said, math is in CSS now with calc() http://dev.w3.org/csswg/css3-values/#calc-notation http://dev.w3.org/csswg/css3-values/#calc-notation Color manipulation will be in Colors level 4, whenever I get the time to work on it (probably early next year).

drivingmenuts 14y ago

I really wish they'd spend some time building a standard for how things are supposed to appear in the browser, lessening our need for normalize.css and reset.css. Then, if browser makers didn't implement appearances the same way, we could point to the standard and ask why.

TabAtkins 14y ago
We already have this: http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#rendering http://www.whatwg.org/specs/web-apps/current-work/multipage/...

bryne 14y ago

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.