@function custom functions

Solo Chrome 139; Safari Technology Preview 249, Firefox en desarrollo. No es Baseline.

Chrome 139Edge 139Safari TPFirefox no

Funciones definidas por el autor con parámetros tipados y un descriptor `result`, utilizables en cualquier sitio donde vaya un valor. Escalas tipográficas fluidas, matemáticas de espaciado y ayudantes de color viven en CSS en lugar de en 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: La línea `clamp()` plana precedente es el respaldo; los navegadores sin soporte ignoran la llamada a la función.

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

Prompt

Define lógica de valores reutilizable con `@function --name(--param <type>, --other: default) { result: ...; }` y llámala como `--name(args)`. Usos típicos: tamaños fluidos, pasos de la escala de espaciado, variantes de opacidad. Solo Chromium en 2026-09: precede siempre cada llamada con una declaración estática de respaldo.