[csswg-drafts] [css-variables][css-cascade] When are variables computed?

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