Entendiendo la Directiva @return en Sass

La directiva @return en Sass se utiliza con el objetivo de denominar el valor de retorno de una función. En términos sencillos, permite especificar qué es lo que una función Sass debe regresar (o devolver) cuando se le invoca.

Supongamos que necesitamos una función que nos calcule el porcentaje. Podríamos definir la función de la siguiente manera:

@function calcular-porcentaje($cantidad, $total) {
  @return ($cantidad / $total) * 100%;
}

En este ejemplo, la palabra @return está informando a Sass qué necesita ser calculado y devuelto cuando alguien llama a la función calcular-porcentaje. En este caso, el porcentaje.

Entonces, podríamos usar la función en alguna parte de nuestro código Sass de la siguiente manera:

.titulo{
  font-size: calcular-porcentaje(16px, 1024px);
}

Lo que hará Sass, al compilar nuestro CSS, será reemplazar calcular-porcentaje(16px, 1024px) con el resultado del cálculo. En este caso, el porcentaje de 16px respecto a 1024px.

Es importante destacar que @return solo puede ser usado dentro de una función Sass. Invocar @return fuera de una función resultará en un error. Además, solo puede utilizarse una directiva @return dentro de una función. Si se coloca más de una, Sass tomará la que se encuentre más cerca del final de la función.

Utilizar @return de forma adecuada puede traer innumerables beneficios. Nos permite crear funciones más sofisticadas, mantener un código más limpio y reutilizable, y optimizar nuestra hoja de estilos CSS. Así que es conveniente familiarizarse con esta, y otras directivas de Sass, para aprovecharlas en su máximo potencial.