@function custom functions

Só Chrome 139; Safari Technology Preview 249, Firefox em desenvolvimento. Não é Baseline.

Chrome 139Edge 139Safari TPFirefox no

Funções definidas pelo autor com parâmetros tipados e um descritor `result`, utilizáveis em qualquer lugar que aceite um valor. Escalas de tipo fluidas, matemática de espaçamento e helpers de cor vivem no CSS em vez do 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: A linha `clamp()` simples anterior é o fallback; navegadores sem suporte ignoram a chamada da função.

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

Prompt

Defina lógica de valor reutilizável com `@function --name(--param <type>, --other: default) { result: ...; }` e chame-a como `--name(args)`. Usos típicos: tamanhos fluidos, passos de escala de espaçamento, variantes de opacidade. Só Chromium em 2026-09: sempre preceda cada chamada com uma declaração de fallback estática.