La regla @function en CSS

Parámetros con valor por defecto

Es posible que nos interese indicar valores por defecto a los parámetros de nuestra función, de forma que si al llamar a la función, no le indicamos unos parámetros, use los valores por defecto.

La forma de hacerlo sería como se puede ver en este ejemplo:

@function --gradient(--color1: indigo, --color2: rebeccapurple) {
  result: linear-gradient(75deg, var(--color1), var(--color2));
}

.box {
  background: --gradient(blue, red);   /* --gradient(blue, red) */
  background: --gradient(green);       /* --gradient(green, rebeccapurple) */
  background: --gradient();            /* --gradient(indigo, rebeccapurple) */
  background: --gradient(red, 10px);   /* Se ignora */
}

Especial atención al último ejemplo, donde si añadimos un valor que no es adecuado (se esperan colores, no tamaños), se intentará aplicar 10px al linear-gradient() y como es un valor no válido se ignora el background.

Ojo que la @function es correcta. Lo anterior ocurre debido al funcionamiento de CSS. Si le pasas un 10px a una propiedad background, simplemente se ignora porque no es válido. Sin embargo, en la siguiente pestaña veremos como cambiar ese comportamiento, que en funciones podría ser algo más apropiado.

Parámetros con tipo de dato

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.

La siguiente función --half-size nos devolverá la mitad del valor que le pasemos por parámetro:

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

Observa, que tras el parámetro --size hemos añadido type(<length> | <percentage>). Esto significa que nuestro parámetro --size puede ser:

• 1️⃣ De tipo «longitud» (px, etc...)
• 2️⃣ De tipo «porcentaje» (%)

Respecto a la función type(), solo es necesaria si necesitamos indicar más de un tipo de dato. Si en nuestra función CSS sólo requerimos un tipo de dato (por ej: length), podríamos definir el tipo de dato de dos formas:

• 1️⃣ El que ya hemos visto: type(<length>)
• 2️⃣ Sin usar type(), de una forma compacta: <length>

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

Definir los tipos de datos en CSS es algo muy útil cuando necesitamos que el navegador comprenda que tipo tiene una variable CSS, para poder actuar en consecuencia, como 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.

Asegurar parámetros con tipos

Observa el siguiente ejemplo. Hemos retomado el ejemplo anterior, pero ahora vamos a asegurar con tipos de datos los parámetros --color1 y --color2. Además, de forma opcional podemos añadirle valores por defecto:

@function --gradient(--color1 <color>: indigo, --color2 <color>: rebeccapurple) {
  result: linear-gradient(75deg, var(--color1), var(--color2));
}

.box {
  background: --gradient(green, yellow);  /* Usa --gradient(green, yellow) */
  background: --gradient();               /* Usa --gradient(indigo, rebeccapurple) */
  background: --gradient(red, 10px);      /* Usa --gradient(red, rebeccapurple) */
  background: --gradient(default, red);   /* Usa --gradient(indigo, red) */
}

Observa especialmente, los dos últimos ejemplos. En esta ocasión, como hemos definido que la función debe aceptar sólo colores por parámetro, en el caso de no cumplirse esta restricción, se descartará ese parámetro y se utilizará el valor por defecto designado. De esta forma no se ignora la propiedad.

En el último ejemplo, el primer parámetro tiene el valor default (que no existe), por lo que descarta y se utilizará el color por defecto. En el segundo parámetro si hemos definido un color válido, por lo que se utilizará.