La regla @function en CSS

De forma tradicional, en CSS no teníamos la capacidad de crear funciones como en los lenguajes de programación. Sin embargo, eso va a cambiar muy pronto, gracias a la regla @function de CSS.

La regla @function

Mediante la regla @function podemos definir funciones reutilizables que podremos usar en nuestro código CSS, pasándole parámetros y devolviendo un valor como resultado.

Como puedes ver en el siguiente ejemplo, las funciones se definen con la sintaxis de las variables CSS, prefijadas con dos guiones. Por ejemplo, --negative es el nombre de nuestra función, mientras que --value es el primer (y único) parámetro que recibe.

Luego, en el interior de la función, utilizaremos result: como algo similar al return de programación, que es el que se encarga de devolver el resultado:

@function --negative (--value) {
  result: calc(-1 * var(--value));
}

.container {
  translate: 20px --negative(20px);   /* 20px -20px */
}

Luego, a la hora de utilizar la función, simplemente escribimos el nombre de la misma. Esta función llamada --negative, simplemente se encarga de invertir el signo del valor pasado por parámetro --value.

Observa que a la hora de utilizar una variable, hay que incluir su nombre dentro de la función var(). Sin embargo, con las funciones simplemente la utilizamos, seguida de paréntesis para ejecutar la función y pasarle parámetros (si los tiene).

Funciones con tipo

Opcionalmente, podemos definir el tipo de dato de los parámetros de nuestra función añadiendo la función type() al final del parámetro. Observa que en el siguiente ejemplo hemos añadido type(<length> | <percentage>), lo que significa que el parámetro --size es de tipo «longitud» (px, etc...) o de tipo «porcentaje» (%), separado por el signo pipe |:

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

Si sólo indicas un tipo de dato, puedes omitir envolver el tipo con type() y simplemente definir el tipo de dato entre < y >. En este ejemplo, estamos creando una función --half-size que nos devuelve la mitad del valor pasado por parámetro --size.

Definir los tipos de datos en CSS suelen ser muy útil cuando necesitamos que el navegador comprenda que tipo tiene una variable CSS, para poder actuar en consecuencia, por ejemplo, al crear animaciones con variables CSS.

Si quieres saber más sobre tipos de datos en CSS, o que tipos de datos puedes utilizar, te aconsejo echar un vistazo a la tabla del artículo la propiedad @property.

Funciones condicionales

Las funciones de CSS, combinadas con las reglas @media nos permiten crear funciones condicionales muy potentes, que pueden ser muy interesantes para definir los estilos de nuestras páginas.

Por ejemplo, observa la siguiente función --my-font-size, la cuál no tiene ningún parámetro. Esta función devuelve el valor 1rem. Sin embargo, luego tiene definido un @media query que nos indica que en el caso de que la pantalla o dispositivo sea más grande de 1000px, devolverá el valor 2rem:

@function --my-font-size() {
  result: 1rem;

  @media (width > 1000px) {
    result: 2rem;
  }
}

De esta forma, podemos hacer un poco más flexibles nuestras funciones.

Mucho cuidado con el orden cuando usas múltiples result. En CSS no puedes hacer early returns. Si en el ejemplo anterior, ponemos el @media antes del primer result, el valor devuelto por la función siempre será 1rem.