[csswg-drafts] [css-variables] Calculating new value of variable based on inherited value (#9142)

dpk has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-variables] Calculating new value of variable based on inherited value ==
```css
div {
  height: var(--foo);
  border: 1px solid #f00;
}

.a {
  --foo: 100px;
}

.b {
  --foo: calc(var(--foo) - 25px);
}
```

```html
<div class=a>
  <div class=b>
    foo box
  </div>
</div>
```

This is apparently treated as a cycle: the `--foo` rule on `.b` is invalid. Using `inherit` within the `calc` function also doesn’t work. It would be useful to be able to use `calc` and some other functions like `color-mix` (maybe even string concatenation in `content`) to derive a new value based on the value inherited from a parent element. In this example, `--foo` on `.b` would then work out to 75px.

It does already work (though I’m not sure it’s supposed to) to have a variable calculated based on the value already given to it in a rule applying to the same element, but not based on a value it inherited from a parent element. So this example will give `.b` the height of 75px I expected:

```css
div {
  --foo: 100px;
  border: 1px solid #f00;
}

.a {
  height: var(--foo);
}

.b {
  height: calc(var(--foo) - 25px);
}
```

([Thanks to Tim R on Stack Overflow for pointing this out.](https://stackoverflow.com/a/76819069/5035717))

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9142 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 2 August 2023 13:43:28 UTC