4 ms·
For those commenting about SASS having this forever etc, note that this goes a step further: :root { --color: blue; } div { --color: green; } #aler
by mendelk 11y ago
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-variables-why-should-you-care#the-cascade https://developers.google.com/web/updates/2016/02/css-variab...
[1] http://cssnext.io/features/#custom-properties-var http://cssnext.io/features/#custom-properties-var
- wanda 11y agoDon't forget that CSS Variables can also be used within media queries.
- masklinn 11y agoAnd if you change a CSS variable in JS, it will recompute all of its uses.
- madeofpalk 11y agoIf you're interested in seeing what happens next with CSS Variables, check out the CSS Houdini project https://drafts.css-houdini.org https://drafts.css-houdini.org It starts with a JS API for more control over CSS Variables (which are actually called Custom Properties), and then goes into APIs for custom renders and even custom layout engines, all controlled via JS + Web Workers
- cdata 11y agoAlso on the topic of things SASS cannot do: Custom Properties effectively enable "styling APIs" to be declared for Custom Elements that have a shadow root, since Custom Properties cascade across shadow boundaries (detail in parent's [0]).