Acompáñanos en este tutorial donde exploraremos los mixins exteds y operadores en Sass

Después de haber descubierto qué es Sass y cómo instalarlo, y haber explorado sus características, hoy profundizaremos en el tema aprendiendo acerca de variables, mixins,  extends y operadores en Sass.

Las variables en Sass nos ayudan muchísimo al momento de desarrollar un proyecto. Si nos ponemos a pensar en el tiempo que necesitamos invertir para cambiar los colores de algún contenedor, un texto, etc. Imagina que este color debe repetirse en 5 o más elementos dentro de tu CSS. Sería muy tedioso estar cambiando uno por uno, pero afortunadamente aquí podemos utilizar las variables de Sass y ahorrarnos varios minutos que aprovecharemos para avanzar el desarrollo de nuestro proyecto.

Mientras más trabajemos con variables, se nos facilitará más manejar algún cambio en nuestro proyecto

Por otro lado, en Sass podemos utilizar operadores (-, +, /, * y %), para hacer cálculos de los tamaños de contenedores, cajas, etc.

En el siguiente ejemplo vamos a usar los operadores para asignar tamaños a algunos elementos.

En el ejemplo anterior tenemos una variable con un ancho de 720px y a cada una de las clases le asignaremos este ancho; luego, la dividiremos entre 2, sumamos o restamos valores y el tamaño de nuestro contenedor irá variando. Esto es algo que no podíamos hacer en un CSS normal y que nos viene muy bien cuando deseemos utilizarlo en nuestros proyectos.

Ahora hablemos un poco sobre los extends, los cuales son fragmentos de código que podremos reutilizar. Esto nos permitirá evitar escribir código de más DRY, el comportamiento de estos fragmentos de código será el mismo en donde lo llamemos, esto es lo que lo diferencia de los mixins (algo que veremos más adelante).

Para crear estos fragmentos de código, lo vamos a hacer de la siguiente manera:

%nombre_extends { … }

Y para poder llamarlo en alguna clase deberemos hacerlo de la siguiente manera:

@extend %nombre_extends;

En el siguiente ejemplo vamos a ver mejor cómo usarlo.

Aquí declararemos tres botones con las clases btn_success, btn_alert, y btn_error, las cuales llamarán al bloque de código %btn, el cual tiene una serie de propiedades que todas las clases utilizaran, de esta manera sass los va a agrupar para evitar que este código se repita por separado.

Finalmente, vamos a ver los mixins. Estos tienen cierto parecido a los extends, pero la diferencia es que estos permiten recibir argumentos, lo que nos brindará una variedad en los estilos con pocas líneas de código. Además, el código de los mixins imprimirá en el lugar donde fueron declarados, a diferencia de los extends.

Para crear los mixins vamos a hacerlo de la siguiente manera:

@mixin nombre_mixins($argumentos…){ … }

Para llamarlo lo vamos a hacer de la siguiente manera:

@include nombre_mixins( argumentos … );

En el siguiente ejemplo vamos a ver mejor cómo usarlo.

Comenzamos definiendo un @mixin, el cual llevará como nombre container y le pasaremos 3 argumentos, $ancho, $alto y $color, los cuales vamos a usar para establecer el ancho alto y color de fondo de nuestro contenedor.

Ahora en el div vamos a llamar a este mixin con @include container() y dentro del paréntesis le pasamos los valores que queremos asignarle al container, así con pocas líneas de código podemos tener un container y pasándose diferentes valores podemos cambiar el cómo estos se muestran.

Es importante recordar que aunque los mixins y extends nos facilitan la vida ayudándonos a reutilizar código, no debemos abusar de ellos, debemos utilizarlos cuando sean necesarios.

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 que tenemos para ti. Recuerda que puedes dejar cualquier duda u opinión en la caja de comentarios. ¡Hasta la próxima!