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)" |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.calc(`${u.var("overlay-arrow-offset", "0.5rem")} * -1`)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`))Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-overlay-arrow-offset |
Signature
u.calc(expression: string)