CSS variable does not change when the result is derived from other css variables

Question

My guess is this a browser issue!

But its interesting

Below I have 2 variation of calculating height and assigning it.

The Black box is using css variable and to calculate and assign the height of the box.

:root {
--content-height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));  
}
.black {
  height: var(--content-height);
}

The Blue box is assigned height without using css variable and it works, while the black doesn't work

.blue {
    height: calc(var(--app-height) - var(--app-footer) - var(--app-footer))
}

Guess both will work in same way? NO

https://codepen.io/Anenth/pen/VVwpzp

Only the second one works fine! Checkout the below code

document.querySelector('body').style.setProperty('--app-height', "100px")

:root {
  --app-header: 20px;
  --app-footer: 20px;
  --app-height: 300px;
  --content-height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));
}

.box {
  width: 50px;
  background: #000;
  margin: 20px;
  display:inline-block;
  vertical-align:top;
}

.box-with-calc-var {
  height: var(--content-height);
}

.box-without-calc-var {
  background: #00F;
  height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));
}

<div class="box box-with-calc-var"></div>
<div class="box box-without-calc-var"></div>

as a side note, the first code you described is totally different from the snippet you provided ... if the `--content-height` was really defined at the same level of your element, both will work the same : https://jsfiddle.net/8xfrdv62/ — Temani Afif, Nov 03 '18 at 08:48
the codepen is like the snippet your provided here ... the variable `--content-height` is defined a root level but if you check your explanation before the snippet where you defined `.black`, you defined the variable there at the same level of height definition which is different from defining at root level (like explained in the duplicate and like shown in the fiddle I shared) — Temani Afif, Nov 03 '18 at 09:11
Understood, But how does changing the scope change the calculated value? — Anenth, Nov 03 '18 at 09:15
simply don't see it as a programming languge but as CSS ...The value at root level is evaluated at root level and will not change if you change the variable again on an inner level ... it's all about Cascading : From top to bottom. Variable at root level don't see the one in the body — Temani Afif, Nov 03 '18 at 10:39

CSS variable does not change when the result is derived from other css variables

0 Answers0