[ @sdxc/u/general ]
calc
Wraps a CSS calc() expression: calc({expression}).
import { calc } from "@sdxc/u/general";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")):
is(calc("100% - 8rem"))
<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:
<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.
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.
u.at("md", u.calc(`${u.var("overlay-arrow-offset", "0.5rem")} * -1`))Signature
u.calc(expression: string)