CSS introduce la regla @function para funciones personalizadas

La especificación de CSS ha introducido una nueva e innovadora regla, @function, que promete transformar la forma en que los desarrolladores web estructuran y reutilizan código. Esta característica permite la definición de funciones personalizadas dentro de CSS, ofreciendo una capacidad de lógica programática directamente en las hojas de estilo.

Estas funciones personalizadas actúan como bloques de código reutilizables que pueden aceptar parámetros, incorporar lógica compleja y devolver un valor específico basado en esa lógica. En esencia, @function amplía las capacidades de las propiedades personalizadas (variables CSS), proporcionando una vía más dinámica y versátil para la gestión del diseño.

Fundamentos de @function

La regla @function utiliza una sintaxis definida para crear estas funciones personalizadas. La estructura general es la siguiente:

@function –nombre-funcion(<parametro-funcion>#?) (retorna <tipo-css>)? { <lista-reglas-declaracion> }

Aquí, `–nombre-funcion` es el identificador único de la función, que debe comenzar con dos guiones. Los `<parametro-funcion>` son las entradas opcionales que la función puede aceptar, y `<tipo-css>` especifica el tipo de valor que la función devolverá. La sección `<lista-reglas-declaracion>` contiene la lógica y las operaciones que definen el comportamiento de la función.

Comparación con Sass

Es importante notar que existe una regla @function similar en Sass, un preprocesador CSS popular. Si bien ambas comparten el propósito de crear funciones reutilizables, sus implementaciones y capacidades difieren. Los desarrolladores que estén familiarizados con Sass deben tener en cuenta estas distinciones para evitar confusiones al buscar recursos o aplicar la funcionalidad en sus proyectos.

Sintaxis Detallada

La definición de una función personalizada implica varios componentes clave:

• `@function`: La palabra clave que inicia la definición de la función.
• `–nombre-funcion`: Un identificador definido por el usuario, que debe comenzar con dos guiones, similar a las propiedades personalizadas. Estos nombres distinguen entre mayúsculas y minúsculas.
• `<parametro-funcion>`: Una lista opcional de parámetros separados por comas. Cada parámetro puede tener un tipo CSS asociado y un valor predeterminado opcional.
• `returns <tipo-css>`: Un descriptor opcional que especifica el tipo de valor que la función devolverá. Si se omite, la función puede devolver un valor inválido.
• `<lista-reglas-declaracion>`: El cuerpo de la función, donde se define la lógica, incluyendo cálculos y el uso de la palabra clave `result`.

Ejemplo Básico de Uso

Consideremos una función simple que calcula la mitad de un valor de longitud proporcionado:

@function –half(–size <length>) { result: calc(var(–size) / 2); }

En este ejemplo, `–half` es el nombre de la función, y `–size` es un parámetro que espera un valor de tipo `length`. El `result` se calcula utilizando la función `calc()` de CSS, dividiendo el valor de `–size` por dos.

Uso de la función:
.contenedor { margin-inline: –half(20px); /* Esto se resolverá a 10px */ }

Verificación de Tipos

Una de las ventajas significativas de @function es la capacidad de realizar verificación de tipos, similar a otros lenguajes de programación. Esto ayuda a detectar errores de forma temprana. Por ejemplo, se puede asegurar que una función solo acepte números y devuelva porcentajes:

@function –progression(–current <number>, –total <number>) returns <percentage> { result: calc(var(–current) / var(–total) * 100%); }

Uso:
.barra-progreso { width: –progression(3, 5); /* Se evalúa a 60% */ }

Si un parámetro no coincide con el tipo declarado, la llamada a la función se invalida, mejorando la robustez del código. Se pueden especificar múltiples tipos permitidos utilizando `type()` y el operador `|`.

Manejo de Listas

Para funciones que necesitan aceptar una lista de valores como entrada, se puede usar el sufijo `#` en el tipo de parámetro. Al llamar a la función, los valores de la lista se encierran entre llaves `{}`.

@function –get-range(–list <length>#, –n <length>) { result: calc(max(var(–list)) – min(var(–list)) + var(–n)); }

Uso:
div { padding-block: –get-range({10px, 100px, 50px, 25px}, 200px); /* Resultado: 290px */ }

Cascada y Lógica Condicional

La regla @function respeta la cascada de CSS. Esto significa que se pueden definir múltiples valores de resultado, y el último valor coincidente será el que prevalezca. Esto abre la puerta a la integración con media queries, @container, y @supports para crear estilos adaptativos y condicionales.

@function –suitable-font-size() returns <length> { result: 16px; @media (width > 1000px) { result: 20px; } }

Uso:
body { font-size: –suitable-font-size(); }

En este ejemplo, el tamaño de fuente será de 16px por defecto, pero cambiará a 20px en pantallas con un ancho superior a 1000px. Es crucial recordar que el orden de las declaraciones importa debido a las reglas de la cascada.

Datos clave
| Característica | Descripción |
|—|—|
| Propósito | Definir funciones CSS personalizadas y reutilizables. |
| Sintaxis | `@function –nombre(…) returns <tipo> { result: … }` |
| Beneficios | Mejora la modularidad, reduce la repetición de código, permite lógica compleja. |
| Verificación de Tipos | Ayuda a detectar errores tempranamente asegurando la validez de los parámetros y el valor de retorno. |

La introducción de @function representa un avance significativo en las capacidades de CSS, permitiendo a los diseñadores y desarrolladores crear interfaces web más dinámicas, eficientes y mantenibles. Esta funcionalidad empodera a los profesionales del diseño web con herramientas de programación más potentes directamente dentro del lenguaje de estilos.

Fuente: estudioarquitectos.cl – https://estudioarquitectos.cl/2026/06/05/funcion-consejos-css/

Datos clave