Use CSS Functions
A value that no scale holds, such as the viewport minus a header or a width that grows with the page, is written as the CSS function it is.
<nav className="p:st t:20 max-h:calc(100dvh-5rem)"></nav>
A class cannot hold spaces, so write the function without them. The spaces CSS needs around + & - are added in the output.
Functions
| Function | Where it works | Example |
|---|---|---|
calc() | Utilities that take a length | max-h:calc(100dvh-5rem) |
clamp() | Utilities that take a length | max-w:clamp(40rem,80vw,96rem) |
min() | Utilities that take a length | w:min(100%,calc(100vw-2rem)) |
max() | Utilities that take a length | w:max(min-content,10rem) |
var() | Every utility | h:var(--accordion-panel-height) |
var() reads a custom property, so it fits values only known at run time, such as a height a component measures or a color set elsewhere: c:var(--brand).
Refused Values
A function is the one way off a scale. A plain value is refused, and so is math where no length fits.
| Class | Why |
|---|---|
w:37px | Not on the scale |
d:calc(1+1) | Display takes no length |
w:attr(width) | Not one of the five functions |