Capítulo 10. Directivas de función

Al margen de las funciones propias definidas por Sass, también es posible definir funciones propias para que puedas utilizarlas en tus hojas de estilos. Ejemplo:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

El código Sass anterior se compila de la siguiente manera:

#sidebar {
  width: 240px;
}

Al igual que sucede con los mixins, las funciones pueden acceder a cualquier variable global y también pueden aceptar argumentos. El contenido de una función puede estar formado por varias líneas, pero siempre debe acabar con una directiva de tipo @return para devolver el resultado de su ejecución.

Las funciones propias también admiten el uso de argumentos con nombre. De hecho, la función del ejemplo anterior también se puede utilizar de la siguiente manera:

#sidebar { width: grid-width($n: 5); }

Para evitar posibles conflictos en el nombre de las funciones, es aconsejable añadirles un prefijo. Así además los usuarios sabrán claramente que esas funciones no forman parte ni de Sass ni de CSS. Una buena idea consiste en utilizar como prefijo tu nombre o el de tu empresa. Si trabajas por ejemplo para la empresa ACME S.A., la función anterior podría haberse llamado -acme-grid-width.

Por último, las funciones propias también soportan el uso de un número variable de argumentos, tal y como se explicó en el capítulo de los mixins.