Ahorra tiempo utilizando Mixins - Sass

¿Qué es Sass?

Sass es un preprocesador de CSS el cual permite escribir y escribir de manera más eficiente y amigable tus hojas de estilo. Algunas de las ventajas de Sass incluyen la posibilidad usar bucles, condicionales, mixin y variables.

Mixins

En Sass, un mixin es un conjunto de declaraciones de estilos que se pueden reutilizar en diferentes partes del código.
Un mixin básico se define de la siguiente manera:

@mixin bg-transparatente {
  background-color: transpartent;
}

Para utilizarlo, simplemente lo llamamos de esta manera:

.cuadrado { 
  @include bg-transpartente;
}

Mixins y condicionales

Hemos visto cómo declarar un mixin básico, ahora veremos cómo crear uno más eficiente utilizando condicionales. Para ejemplificar, crearemos un mixin que nos permita justificar los elementos dentro de un contenedor hacia la izquierda, centro y derecha.
Esta sería una de las tantas formas de justificar los elementos en CSS:

.contenedor {
  display:flex;    
  justify-content:center;
} 

Aunque estas dos líneas de código son simples, pueden repetirse varias veces en un proyecto. Para evitar esta repetición, podemos utilizar el siguiente mixin:

@mixin align-flex( $posicion ) {
  display: flex;
  @if $posicion == "izquierda" {
    justify-content: flex-start
  }@else if  $posicion  ==  "centro" {
    justify-content: center;
  }@else if $posicion  ==  "derecha" {
    justify-content: flex-end;
  }
}

Luego, para utilizarlo en nuestro código, simplemente lo llamamos de esta manera:

.contenedor {
  @include  align-flex(centro);  // Justifica los elementos al centro
  background-color: black; 
  width: 100px;
  height: 100px;
}

Las posibilidades de estas herramientas que nos brinda Sass van más allá de las mostradas en este ejemplo. Espero que te animes a probarlas si aún no lo has hecho.