# @function custom functions

Estado: Solo Chrome 139; Safari Technology Preview 249, Firefox en desarrollo. No es Baseline.  
Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@function  
Página: https://designforai.dev/es/css/function-custom-functions

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.

## HTML

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

## CSS

```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}
```

Fallback: La línea `clamp()` plana precedente es el respaldo; los navegadores sin soporte ignoran la llamada a la función.

## 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.