Calculating new value of CSS variable based on existing value

Question

How do I recalculate a new value of a CSS variable (custom property) in a sub-element using calc() to modify the value inherited from a parent element?

This doesn’t work:

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>

The browser seems to completely unset the value of --foo on .b.

Using the inherit keyword in the calc() expression also doesn’t work.

Answer 1

As other commenters have noted, this is not currently possible. However, the CSS WG recently voted to add inherit as a function to the CSS Values spec, which will make this possible once it’s supported by browsers.