En este tutorial aprenderemos a crear y usar las funciones en Sass

Tras revisar la instalación, características y operadores en Sass, así como los mixin y extend, tipos de dato map, hoy nos adentramos a las funciones en SASS.

Las funciones en Sass son parecidas a los mixin, ya que ambos pueden acceder a variables globales que estén declaradas en el archivo y pueden aceptar argumentos; sin embargo, una de las diferencias principales es que para declarar una función se debe utilizar la palabra @function seguida del nombre de la función que queramos declarar, y entre paréntesis podremos pasar los argumentos que necesite nuestra función. Además, al terminar de crear nuestra función, es necesario utilizar un @return seguido de lo que retornaría después de su ejecución. Ejemplifiquemos:

@function nombre_function($arg){

@return $arg; }

Para entenderlo mejor, veamos el siguiente ejemplo:

En el siguiente ejemplo tenemos una función número. Si a esta no le pasamos ningún valor, tomará por defecto 500px y nos retornará la división de este valor entre 2. En las clases .uno y .dos estamos usando esta función. A la primera no le pasamos ningún valor por lo que su width será de 250px y a la segunda, le pasamos 600px, lo que nos retornará 300px que usaremos en el ancho.

No debemos olvidar que Sass nos brinda una serie de funciones predefinidas, las cuales podemos usar para manipular colores, valores numéricos y cadenas. A continuación mencionaremos algunas de estas. Si quieres ver la lista completa, solo tienes que hacer click aquí.

Para usar las funciones de color como RGB, debemos pasar tres argumentos que son $red, $green y $blue, los valores pueden ir de 0 a 255 o de 0% a 100%. En caso de querer usar RGBA, tendremos un argumento más $apha, cuyos valores van desde  0 a 1.

Cuando queremos trabajar con HSL, tendremos $hue, cuyos valores pueden ir a de 0 a 360°, $saturation y $lightness aceptan valores entre 0% y 100%, y al igual que antes, si queremos trabajar con HSLA, deberemos pasarle un valor extra que será el canal $alpha el que acepta valores entre 0 y 1.

En el siguiente ejemplo se muestra de mejor manera cómo trabajar con estas funciones.

Ahora trabajaremos con funciones numéricas en Sass. Veamos la función porcentage($number), a la cual le podemos pasar un valor numérico que convertirá a porcentajes. Por ejemplo, si le pasamos el numero 1 este será igual a 100%, pero esta función no solo se limita a esto, también podemos hacer algunas operaciones como dividir un par de números y el resultado será convertido a porcentaje: porcentage(1 / 2) y el resultado será porcentage( 0.5 ) que significaría el 50%. Veamos el siguiente ejemplo para entender mejor cómo trabajar con esta función.

Finalmente, veremos cómo podemos trabajar con funciones de listas en Sass, vamos a ver la función nth($list , $n). En esta función, trabajaremos con una lista, elegimos uno de los items. Por ejemplo, si tenemos nth((10%, 50%, 100%), 2), estaremos escogiendo el 50% que se encuentra en la posición 2 de nuestra lista, en el siguiente ejemplo lo podremos apreciar mejor.

Hasta aquí llegamos con el tutorial de hoy. Aún quedan muchas funciones por explorar. Para interiorizar lo mostrado, no olvides que la práctica es esencial. ¡Anímate a crear un nuevo proyecto y empieza a ejercitarte!

Si deseas aprender más de desarrollo web y móvil, te invito a registrarte a la plataforma y a revisar los cursos de desarrollo web y móvil que tenemos para ti. Recuerda que puedes dejar cualquier duda u opinión en la caja de comentarios. ¡Hasta la próxima!