- From: Chris Harvey via GitHub <sysbot+gh@w3.org>
- Date: Mon, 18 Jun 2018 12:34:09 +0000
- To: public-css-archive@w3.org
chharvey has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-variables][css-cascade] When are variables computed? == I’m a bit confused by [“`var()` functions are substituted at computed-value time”](https://drafts.csswg.org/css-variables/#substitute-a-var) and how it relates to inheritance. ```css div { --color-accent: lime; --color-text: var(--color-base); --color-bg: var(--color-accent); } figure { --color-base: red; --color-accent: blue; } p { /* isn’t --color-text: var(--color-base); inherited here? */ /* isn’t --color-bg: var(--color-accent); inherited here? */ color: var(--color-text); background-color: var(--color-bg); } ``` ```html <div> <figure> <p>My text should be red, and my background should be blue.</p> <!-- They’re not. The text is black (inherited) and the background is lime. --> </figure> </div> ``` [**CodePen**](https://codepen.io/chharvey/pen/PaOaBX) I thought all custom properties inherit, so wouldn’t the paragraph inherit the `--color-text` and `--color-bg` properties from the div? Since it also inherits the `--color-base` and `--color-accent` from the figure, shouldn’t the color be red and the background-color be blue? Sources: - https://drafts.csswg.org/css-cascade/#value-stages - https://drafts.csswg.org/css-variables/#substitute-a-var Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2793 using your GitHub account
Received on Monday, 18 June 2018 12:34:12 UTC