[css-variables] Calculating new value of variable based on inherited value

[dpk]

div {
  height: var(--foo);
  border: 1px solid #f00;
}

.a {
  --foo: 100px;
}

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

<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.

[johannesodland]

There’s another issue for implementing an inherit() function for accessing parent properties: #2864

The CSSWG voted to define this for custom properties two weeks ago: #2864 (comment)

Might this be what you need?