# CSS Functions

Use calc(), clamp(), min(), max() & var() as utility values.

## Using CSS Functions

Write a value off the scale as the CSS function it is.

```tsx title="page.tsx" "max-h:calc(100dvh-5rem)"
<nav className="p:st t:20 max-h:calc(100dvh-5rem)"></nav>
```

```css title="output.css"
.max-h\:calc\(100dvh-5rem\) {
  max-height: calc(100dvh - 5rem);
}
```

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, for values known only at run time: `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 |