Introducción a los Mixins de SASS

sass-1.png
Solucionex
03
Ene 20

Los mixins le permiten definir estilos que se pueden reutilizar en toda su hoja de estilos. Facilitan evitar el uso de clases no semánticas que nos permiten distribuir colecciones de estilos en bibliotecas. 

Usamos mixins para poder ahorrar tiempo en el desarrollo y reutilizar nuestros estilos, de ésta manera si tenemos componentes desarrollados que se pinten de la misma forma, tendremos ya maquetadas esas partes incluyendo nuestros mixins.

Supongamos que tienes muchos componentes en una página, posiblemente algún tipo de componente de tarjeta en una cuadrícula. Y esa tarjeta, o componente principal tiene hijos que están centrados horizontal y verticalmente dentro de ella.

Vamos a acoplar las propiedades de flexbox con la combinación de mixins para crear un bloque de código que se pueda usar en todo el lugar si es necesario.

Lo mejor de los mixins es que podemos crear múltiples mixins para diferentes escenarios y simplemente intercambiarlos cuando sea necesario.

Crearemos éste mixin para poder usarlo:

@mixin center-content {

 display: flex; 

 justify-content: center; 

 align-items: center; 

}

.parent-container{

 @include center-content;

}

De ésta manera podremos crear los estilos de las tarjetas, colocar elementos, etc Y así podremos reusarlos para cualquier web y para cualquier lugar.

En próximos post publicaré cómo trabajar con argumentos dentro de los mixins y más funciones para poder explotar más el lenguaje.