Sass: Bloques reutilizables de código con Mixins

Muchas veces mientras trabajamos con los estilos de nuestro sitio/aplicación nos topamos con que tenemos una serie de atributos que se van repitiendo una y otra vez, en la gran mayoría de los casos la única opción viable es replicar ese código. Ahora bien esto ultimo nos trae siempre aparejado el problema de que si necesitamos cambiar algo deberemos hacerlo en todos los lugares donde hayamos puesto ese código logrando que sea una tarea tediosa y en la cual existe la posibilidad de que nos olvidemos de modificar algo o que modifiquemos algo por error. Por todas estas razones es que existen los Mixins, los cuales nos permiten agrupar bloques de código como si fueran variables.

El siguiente ejemplo muestra como podemos tener codigo duplicado para dos clases distintas:

Introducción

Los Mixins nos permiten definir estilos los cuales pueden ser reutilizados en toda la hoja de estilos sin necesidad de asociarlo a ninguna clase. Ademas a los Mixins se les pueden pasar argumentos que modifiquen el valor de los atributos como asi tambien es valido utilizar funciones dentro de los mismos (if / for / while / each).

Para poder empezar a usarlos deberemos declaralo por medio de @mixin nombreDelMixin y luego dentro del mismo todos los atributos con sus valores respectivos. Una vez declarado solo resta incluirlo dentro de las clases que los necesitemos para lo cual deberemos colocar @include nombreDelMixin en cada uno de las clases implicadas. Ahora tomemos el codigo del ejemplo anterior y modifiquemoslo para poder usar mixins.

SASS CSS

@mixin label {

border: 1px solid #ccc;

font-size: 1em;

text-transform: uppercase;

}

.label-a {

@include label;

background: #777;

}

.label-b {

@include label;

background: #ff0;

}

.label-a {

border: 1px solid #ccc;

font-size: 1em;

text-transform: uppercase;

background: #777;

}

.label-b {

border: 1px solid #ccc;

font-size: 1em;

text-transform: uppercase;

background: #ff0;

}

Como se ve en el ejemplo el @include aparece despues de la declaracion del @mixin, lo cual es vital para que el Sass compile. Otra cosa que se debe tener en cuenta es no mezclar el concepto de @import cuya utilidad es importar otros archivos con el @include que es solo para incluir @mixin

Pasando argumentos

Los mixins permiten el pasaje de uno o multiples argumentos con el fin de poder modificar los valores de los atributos. Para ello luego de la declaracion del mixin deberemos colocar dentro de parentesis el nombre de cada uno de los argumentos y cuando se los incluyen en las distintas clases se debe poner luego del nombre dentro de parentesis los valores de cada uno de ellos. Veamos ahora algunos ejemplos sobre argumentos:

  • Pasando un solo argumento
SASS CSS

@mixin label ($font-size){

border: 1px solid #ccc;

font-size: $font-size;

text-transform: uppercase;

}

.label-a {

@include label (1em);

background: #777;

}

.label-a {

border: 1px solid #ccc;

font-size: 1em;

text-transform: uppercase;

background: #777;

}

 

  • Pasando varios argumentos
SASS CSS

@mixin label ($font-size, $text){

border: 1px solid #ccc;

font-size: $font-size;

text-transform: $text;

}

.label-a {

@include label (1em, uppercase);

background: #777;

}

.label-a {

border: 1px solid #ccc;

font-size: 1em;

text-transform: uppercase;

background: #777;

}

 

  • Ahora bien todos estos ejemplos tienen en considerancion que siempre le pasemos todos los argumentos, para el caso de que nos olvidemos de pasar alguno de los parametros podemos señalarle al mixin un valor por default a cada argumento. Para ello en la declaracion del mismo separado por : luego de cada argumento deberemos poner el valor por default.
SASS CSS

@mixin label ($font-size: 1em, $text: uppercase){

border: 1px solid #ccc;

font-size: $font-size;

text-transform: $text;

}

.label-a {

@include label;

background: #777;

}

.label-a {

border: 1px solid #ccc;

font-size: 1em;

text-transform: uppercase;

background: #777;

}

 

  • Por ultimo y no menos importante supongamos que tenemos un mixin con muchos parametros y no recordamos bien el orden correcto de los mismos, Sass nos permite indicarle en la clase que incluye el mixin que valores se corresponden a cada uno de los argumentos. Para hacer esto posible deberia hacerse algo asi @include nombreDelMixin ($atributo: valor)
SASS CSS

@mixin label ($font-size, $text){

border: 1px solid #ccc;

font-size: $font-size;

text-transform: $text;

}

.label-a {

@include label ($font-size: 1em, $text: uppercase);

background: #777;

}

.label-a {

border: 1px solid #ccc;

font-size: 1em;

text-transform: uppercase;

background: #777;

}

Interpolacion

Como hemos visto en articulos anteriores la interpolacion hace referencia a la utilizacion de variables como parte del nombre de un atributo (border-#{$variable}), esto es con el fin de poder modificar a que atributo hacemos referencia de manera dinamica. Ahora bien los mixins no quedan excluidos de esto ya que podemos hacer uso por medio del uso de argumentos como muestra el siguiente ejemplo:

SASS CSS

@mixin highlight($color, $side) {

border-#{$side}-color: $color;

}
.button {

@include highlight(#ff0, right);

}

.button {

border-right-color: #ff0;

}

Conclusion

Como se ha podido ver a lo largo de este post, los mixins son de gran ayuda ya que evitan escribir una y otra vez codigo dentro de nuestras hojas de estilos a la vez que centralizan en un solo lugar bloques de codigo comunes. Ademas de esto gracias a la posibilidad de pasarle argumentos nos posibilitan que el mixin sea dinamico y que podamos hacer que cambie tanto los valores de los atributos como los atributos implicados tambien.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *