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

> what they really mean is “child elements inherit the computed value of custom properties” (as opposed to the declared value).

Yes, but that's what inheritance *always* means, so there's no need for people to explicitly say it.  Declared values are never inherited (see [the Cascade module](https://drafts.csswg.org/css-cascade/#inheriting)).

> Do you recommend another mechanism that does what I’m trying to achieve?

There's no way to do what you want in the way that you want it. If you want something to respond to variable, it has to be set on the element that declares that variable (or a child that inherits it). You can't set up a custom property somewhere high in the tree that automatically takes on changing values of variables lower in the tree.

In other words, do all your `var()` usage lower in the tree, on the actual elements that either set or consume the variables.

> Is this because the initial value of color is currentColor, or is it because color an inherited property and the invalid value is actually defaulting to inherit instead of initial?

See <https://drafts.csswg.org/css-variables/#invalid-variables> - when a property is "invalid at computed value time", it computes to either its inherited or initial value, depending on whether it's an inherited property or not.  `color` is inherited, so in your example it grabs the (inherited) `black` that comes from the `figure`. If you set `figure` to `color: purple;`, then yeah, it'll inherit that `purple` instead.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2793#issuecomment-398206923 using your GitHub account

Received on Monday, 18 June 2018 22:03:56 UTC