Funciones CSS nativas: todo sobre @function

El lenguaje CSS evoluciona para ser más potente. Llega una gran novedad: las funciones personalizadas con la regla @function. Antes, teníamos que usar herramientas como SASS o JavaScript para realizar cálculos complejos. Hoy, el navegador puede hacerlo por sí solo.

Para un proyecto donde la velocidad es la prioridad, esto es una revolución. Usar el motor nativo del navegador siempre es más rápido que añadir código externo. Este artículo te explica cómo funciona, paso a paso.

#¿Qué es una función CSS nativa?

Una función es una pequeña máquina. Le das una información (una entrada), realiza un cálculo y te da un resultado (una salida).

Con @function, creas tus propias herramientas de cálculo. Esto permite organizar tu código y evitar repetir los mismos cálculos en todas partes. Es lo que llamamos encapsulación.

¿Por qué es más rápido?

Cuando usas JavaScript para modificar un estilo, el navegador debe detenerse para leer el script. Con las funciones CSS, el navegador realiza el cálculo al mismo tiempo que dibuja la página.

• Ahorro de tiempo: No es necesario cargar archivos pesados.
• Fluidez: El cálculo lo realiza el motor del navegador (en C++), lo cual es muy eficiente.

#Cómo escribir una función @function

La sintaxis es precisa. Se parece a las variables CSS (Custom Properties). El nombre de tu función siempre debe empezar por dos guiones --.

Aquí tienes un ejemplo sencillo para calcular un tamaño de texto:

Copiar/* Variable base para los cálculos */
$font-size : .625;

@function --main-spacing(--multiplier) {
  result : calc(--multiplier * 1rem * $font-size);
}

.card:not(.is-compact) {
  margin-block-end : --main-spacing(4);
  padding-inline   : --main-spacing(2);
}

#El sistema de tipos: establecer reglas estrictas

Para que una función trabaje bien, hay que decirle qué tipo de datos va a recibir. Esto es lo que llamamos tipado. El CSS utiliza palabras entre corchetes angulares para definir estos tipos.

Los tipos más comunes:

1. <number>: Un número simple (ej: 1, 2, 1.5).
2. <length>: Un tamaño (ej: 10px, 2rem, 15vh).
3. <color>: Un color (ej: red, #ff0000, oklch(50% 0.1 20)).
4. <percentage>: Un porcentaje (ej: 50%).

Al especificar el tipo, ayudas al navegador a preparar el cálculo. Si envías un color a una función que espera un tamaño, el navegador sabrá inmediatamente que hay un error.

#El polimorfismo: el poder del “o”

Es una palabra complicada para una idea sencilla: una función puede aceptar varios tipos de datos. Para ello, usamos el símbolo de barra vertical | que significa “o”.

Ejemplo de función flexible

Imagina una función que gestiona el grosor de un borde. Podría aceptar un número preciso o un porcentaje.

Copiar@function --border-logic(--size : type(<length> | <percentage>)) {
  result : calc(--size / 2);
}

.box {
  border-inline-start-width : --border-logic(1rem * $font-size);
}

.box-relative {
  border-inline-start-width : --border-logic(10%);
}

Gracias a type(<length> | <percentage>), tu función es polimórfica. Se adapta a lo que le das. Es muy útil para crear sistemas de diseño flexibles.

#Diseño fluido sin media queries

El rendimiento también viene de la simplicidad. En lugar de crear reglas diferentes para cada tamaño de pantalla (media queries), podemos usar funciones matemáticas como clamp().

Una función personalizada puede automatizar este cálculo para todo tu sitio.

Copiar@function --make-fluid(--min, --max) {
  /* Cálculo automático entre 320px y 1280px */
  --slope     : calc((--max - --min) / (128 - 32));
  --intercept : calc(--min - --slope * 32);

  result      : clamp(
    --min * 1rem * $font-size,
    calc(--slope * 100vw + --intercept * 1rem * $font-size),
    --max * 1rem * $font-size
  );
}

.title {
  font-size : --make-fluid(2, 5);
}

El navegador calcula el tamaño ideal de forma continua. Es mucho más ligero para el procesador que cambiar de estilo cada vez que se cambia el tamaño de la ventana.

#Límites que debes conocer

Aunque estas funciones son potentes, tienen reglas estrictas para seguir siendo rápidas:

1. Sin bucles infinitos: Una función no puede llamarse a sí misma. Si lo hace, se detiene inmediatamente.
2. La última palabra es del resultado: Si escribes varias veces result en la misma función, se usará el último.
3. Sin variables locales complejas: Por ahora, es preferible realizar los cálculos directamente en result.

#¿Por qué es importante para ti?

Como desarrollador, tu objetivo es crear una experiencia perfecta. Un sitio que reacciona rápido es un sitio que a la gente le gusta usar. Las funciones nativas te permiten:

• Reducir el código innecesario.
• Centralizar la lógica matemática.
• Mejorar la puntuación de rendimiento (Core Web Vitals).

Es una herramienta indispensable para construir la web del mañana. Menos JavaScript, más CSS inteligente.

#Conclusión

La llegada de @function transforma el CSS en un lenguaje más lógico y eficiente. Al entender cómo usar los tipos y el polimorfismo, puedes crear arquitecturas de código muy sólidas.

El rendimiento no solo se gana optimizando imágenes, también se gana eligiendo las herramientas nativas adecuadas. El futuro del CSS está aquí: es rápido, está tipado y es increíblemente eficaz.

Preguntas Frecuentes

Lionel Péramo

Experto en Rendimiento Web y Ecodiseño

Desarrollador Full Stack y creador del framework OTRA (PHP) y de la librería EcoComposer. Escribo para hacer la web más rápida e inclusiva.

Sobre mí →