En Sass, así como en otros preprocesadores, existen herramientas para reutilizar código, y para hacer cálculos que devuelvan un código procesado. Para esta parcela de trabajo, en Sass tenemos los mixins, que serían algo así como lo que conocemos como funciones en un lenguaje de programación. Hoy en el Manual de Sass aprenderemos acerca de los mixin.

Podemos escribir un mixin e invocarlo tantas veces como sea necesario, produciendo una salida CSS. Un mixin además tiene la habilidad de recibir parámetros, como las funciones, de modo que se produzca la salida a partir del valor de los parámetros recibidos en su invocación.

La utilidad de los mixin es la de permitir al desarrollador escribir menos código, ya que por medio de su procesamiento y el envío de parámetros, los mixins pueden producir salida variada solamente con invocarlos. Al pasarle parámetros distintos podremos obtener varias salidas personalizadas a nuestras necesidades, con un mismo mixin de base. Pero esa no es la principal ventaja. Realmente lo más interesante es producir un código más claro, más expresivo y sobre todo con mayor facilidad de mantenimiento.

Aunque no es de las funcionalidades más elementales de Sass, el uso de mixins no es difícil. Inclusive, si no tienes conocimientos de programación y no sabes lo que son las funciones, los entenderás fácilmente. A medida que veas ejemplos de mixins Sass en este artículo irás entendiendo mejor su utilidad y la potencia que tienen.

Definición de un mixin

Comencemos aprendiendo a definir un mixin. Es algo muy sencillo, pues simplemente tenemos que comenzar a declararlos con la cadena "@mixin", seguido por el nombre del mixin que estamos generando y unas llaves para englobar su código.

Aquí tenemos un primer ejemplo de mixin:

@mixin color-invertido {
  background-color: #111;
  color: #eee;
}

Este mixin simplemente define dos propiedades de CSS, que serán incluidas allí donde se invoque.

Invocación de un mixin

Ahora veamos cómo llamar ese mixin Sass para producir una salida. Es tan sencillo como escribir "@include" seguido del nombre del mixin que queremos invocar.

Por ejemplo, dado el mixin anterior, "color-invertido", podríamos tener diversos elementos de la página a los que querríamos aplicar esas propiedades. En vez de copiar y pegar todo el tiempo los mismos valores, invocamos el mixin.

h1.invertido {
  font-size: 1.3em;
  padding: 15px;
  @include color-invertido;
}

div.invertido {
  padding: 5px;
  @include color-invertido;
}

blockquote {
  margin: 2em 3em;
  padding: 20px;
  text-align: center;
  @include color-invertido;
}

Esto produce como salida:

h1.invertido {
  font-size: 1.3em;
  padding: 15px;
  background-color: #111;
  color: #eee; }

div.invertido {
  padding: 5px;
  background-color: #111;
  color: #eee; }

blockquote {
  margin: 2em 3em;
  padding: 20px;
  text-align: center;
  background-color: #111;
  color: #eee; }

Paso de parámetros en un mixin Sass

La utilidad de los mixin no sería tal si no tuvieran la capacidad de recibir parámetros. Esto es muy interesante, porque así nuestros mixins pueden producir salida diferente, simplemente mandando valores de parámetros distintos.

Un claro ejemplo de esta utilidad es la inserción automática de los vendor prefixes de CSS, es decir, los prefijos que necesitan algunos navegadores para entender ciertas propiedades CSS nuevas, que todavía no están en el estándar definitivo.

Por ejemplo, una de las propiedades CSS que necesita todavía hoy ciertos vendor prefixes es "transform". Podríamos realizar un mixin que recibe como parámetro la función de transformación. Luego como salida el mixin incluye esa función de transformación, con todos los prefijos que queramos que sean incorporados.

@mixin transformar($propiedad) {
  -webkit-transform: $propiedad;
  -ms-transform: $propiedad;
  transform: $propiedad;
}

Ahora podemos aplicar ese mixin en cualquier elemento que queramos transformar. Seguiremos usando el método de antes con @include, solo que ahora después del nombre del mixin a invocar, debemos enviar el valor del parámetro con la función de transformación a aplicar.

.escalada {
  @include transformar(scale(2, 3))
}

h1 {
  color: blue;
  @include transformar(rotate(22deg))
}

Como puedes imaginar, simplemente cambiando el parámetro, podemos conseguir efectos distintos de transformación, con sus apropiados prefijos. Esto producirá como salida el siguiente CSS procesado.

.escalada {
  -webkit-transform: scale(2, 3);
  -ms-transform: scale(2, 3);
  transform: scale(2, 3); }

h1 {
  color: blue;
  -webkit-transform: rotate(22deg);
  -ms-transform: rotate(22deg);
  transform: rotate(22deg); }

Los mixins pueden producir todo tipo de salida

Hasta ahora hemos visto mixins que producían una salida con una serie de propiedades, que se incluirán en el selector que nosotros queramos, al aplicar el mixin. Pero realmente un mixin puede producir salidas más complejas, con selectores diversos y aplicando estilos en ellos.

Por ejemplo, este mixin produce una serie de selectores de etiqueta, con sus propiedades:

@mixin encabezados {
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.2em;
  }
  h3 {
    font-size: 1em;
  }
}

Al invocarse, (@include encabezados) se colocarán esos estilos allí donde se requiera. Quizás este mixin no sea tan útil pero si lo parametrizamos un poco ya podrá comenzar a tener sentido, como veremos en el siguiente ejemplo.

Piensa en el mixin anterior "encabezados" y piensa que quieres aprovechar ese código para preparar estilos con encabezados de diversos tamaños, dependiendo de un parámetro. Para conseguir eso podríamos recibir un parámetro que sea el tamaño del encabezado superior (h1) y luego ir restando para producir los tamaños de encabezados menores.

Conseguir esto es muy sencillo con un parámetro en el mixin, con el que indicamos el tamaño base del H1, sobre el que luego iremos restando.

@mixin encabezados($tamano) {
  h1 {
    font-size: $tamano;
  }
  h2 {
    font-size: $tamano - 0.2;
  }
  h3 {
    font-size: $tamano - 0.5;
  }
}

Ahora al incluir el mixin tendremos que pasarle el tamaño base del H1, con los paréntesis.

@include encabezados(2em);

Por ejemplo, podríamos obtener utilidad de este mixin a la hora de definir las mediaqueries.

@include encabezados(1.5em);
@media(min-width: 800px) {
  @include encabezados(2em);
}
@media(min-width: 1200px) {
  @include encabezados(2.5em);
}

Esto producirá la siguiente salida:

h1 {
  font-size: 1.5em; }

h2 {
  font-size: 1.3em; }

h3 {
  font-size: 1em; }

@media (min-width: 800px) {
  h1 {
    font-size: 2em; }

  h2 {
    font-size: 1.8em; }

  h3 {
    font-size: 1.5em; } }
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5em; }

  h2 {
    font-size: 2.3em; }

  h3 {
    font-size: 2em; } }

Conclusión

La verdad es que yo nunca pensé que CSS pudiera necesitar de herramientas similares a las de los lenguajes de programación, con cosas como funciones o mixins, pero lo cierto es que en el día a día pueden ser muy útiles. No solo para poder realizar un mantenimiento más sencillo en un proyecto, sino también para reutilizar código de proyectos a proyectos. Seguro al usarlos irás construyendo utilidades que te vendrán muy bien para los siguientes trabajos.

A medida que explores más aún te darás cuenta que hay otra serie de utilidades en el lenguaje para hacer mixins Sass más complejos, que hagan cosas más espectaculares. De momento lo que hemos visto está bien para comenzar y la mayor parte de los mixins la verdad es que hacen cosas bastante similares a las aprendidas.

De todos modos, en siguientes artículos continuaremos dando ejemplos con mixins más complejos que te vendrá bien conocer y practicar para seguir sacando el mejor partido de Sass.