# calc

> Wraps a CSS `calc()` expression: `calc({expression})`.

```ts
import { calc } from "@sdxc/u/general";
```

Wraps a CSS `calc()` expression: `calc({expression})`. Returns a plain
string, usable anywhere a utility accepts a raw CSS value, typically with
`u.var()` to combine a custom property with an arithmetic operation.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| ``u.calc(`${u.var("overlay-arrow-offset", "0.5rem")} * -1`)`` | `"calc(var(--ui-overlay-arrow-offset, 0.5rem) * -1)"` |

## Examples

### Basic example

Use `calc(expression)` to compute a CSS value that mixes units, then pass it to any utility that takes a length, like `is(calc("100% - 8rem"))`:

```tsx
<div mix={[...]}>
	<div mix={[is(calc("100% - 8rem")), ...]}>is(calc("100% - 8rem"))</div>
</div>
```

### With custom properties

Combine `calc()` with `u.var()` so one custom property drives several sizes, like a main column that fills what a sidebar leaves:

```tsx
<div mix={[u.vars({ sidebar: "10rem" }), hstack(), ...]}>
	<aside mix={[is(u.var("sidebar")), ...]}>sidebar</aside>
	<main mix={[is(u.calc(`100% - ${u.var("sidebar")}`)), ...]}>main</main>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.calc(`${u.var("overlay-arrow-offset", "0.5rem")} * -1`))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.calc(`${u.var("overlay-arrow-offset", "0.5rem")} * -1`))
```

## Signature

```ts
u.calc(expression: string)
```