@function custom functions

Chrome 139 only; Safari Technology Preview 249, Firefox in development. Not Baseline.

Chrome 139Edge 139Safari TPFirefox no

Author-defined functions with typed parameters and a `result` descriptor, usable anywhere a value goes. Fluid type scales, spacing math and color helpers live in CSS instead of Sass.

Fluid heading via @function

CSS

@function --fluid(--min <length>, --max <length>, --vw-min: 360px, --vw-max: 1200px){
  result:clamp(var(--min),calc(var(--min) + (var(--max) - var(--min)) * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))),var(--max));
}
.fx-052{font-size:clamp(1.4rem,3vw,2.4rem);font-size:--fluid(1.4rem,2.4rem);font-family:system-ui}

HTML

<h2 class="fx-052">Fluid heading via @function</h2>

Fallback: The preceding plain `clamp()` line is the fallback; unsupported browsers ignore the function call.

Source: developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@function

Prompt

Define reusable value logic with `@function --name(--param <type>, --other: default) { result: ...; }` and call it as `--name(args)`. Typical uses: fluid sizes, spacing scale steps, opacity variants. Chromium-only in 2026-09: always precede each call with a static fallback declaration.