demo · v138

Typed arithmetic in calc()

Dial the base and ratio. The bar heights are computed in CSS as calc(var(--base) * pow(var(--ratio), n)) — a length times a unit-less power result. Typed arithmetic is what lets the unit travel cleanly through the expression.

checking support…
40px
1.35
×1
×r
×r^1.5
×r^2
base = 40px · ratio = 1.35
heights computed: —

the code

.stage { --base: 40px; --ratio: 1.35; }
.bar.b3 { height: calc(var(--base) * pow(var(--ratio), 1.5)); }
/* pow() returns a unit-less number; multiplying it by a length
   yields a length. Before typed arithmetic, this combination was
   either rejected or produced a wrong-typed result. */

see also