Optimizando código (I). La directiva @mixin.

En este artículo continuamos descubriendo las posibilidades que SASS nos ofrece para el desacoplamiento y la optimización de código. En concreto vamos a conocer los mixins. Se trata de una técnica que consiste en agrupar reglas CSS en bloques de código flexibles que pueden, a su vez, ser incluidos en otras reglas.

Junto con las funciones (que también conoceremos en artículos posteriores de esta serie), son una potente herramienta que, bien empleada, permite desarrollar fácilmente un código legible, compacto y, lo que es más importante, altamente mantenible, tanto por el propio desarrollador como por otros developers que lo retomen más adelante, facilitando así la colaboración entre distintos equipos.

Al principio el uso de mixins asusta un poco (al menos, a mí me asustó cuando conocí esta técnica), pero es extremadamente fácil de comprender y utilizar, al tiempo que resulta increíblemente útil. Vale. Nos dejamos de cháchara. Vamos al lío.

EL ESCENARIO

Llegados a este punto vamos a simplificar un poco el escenario, eliminando el documento HTML. Ya sabemos que, una vez generado el CSS, este es correctamente incorporado a la página, como es lo normal, y ya no nos aporta nada. De este modo, vamos a poder centrarnos en la construcción de los archivos scss y su transpilación a css. Por lo tanto, las reglas de estilos que establezcamos en los scss se referirán a selectores que «podría» tener el documento HTML. Lo que nos interesa es ver las capacidades que nos proporcionan los mixins, y como usarlos.

Vamos a empezar con un código SASS conceptualmente muy simple aunque, cómo verás, engorrosamente largo. No empleamos mixins, para que luego puedas ver la diferencia cuando los empleeemos. Se llama sin_mixins.scss:

Como ves si analizas el código, no tiene nada especial. Todas las reglas que ves son habituales de CSS, aunque estén en sintaxis de SASS. Una vez que hacemos la transpilación obtenemos el archivo sin_mixins.css:

Como ves, es una sintaxis CSS totalmente normalizada, que no tiene mayor misterio. Si tuvieras un documento HTML con las siguiente líneas

<div id="container_left"></div>
<div id="container_right"></div>

obtendrías algo como esto:

 

ENTRAN LOS MIXINS

El código anterior funciona perfectamente, pero, a nada que lo analices un poco, te das cuenta de que «algo no cuadra». Lo que no cuadra, está claro, es que la mayor parte de las reglas están repetidas para ambos selectores. Salvo muy pocas diferencias, ambos son iguales. Lo ideal sería poder agrupar todas las reglas que son comunes en un bloque de código, y llamar a dicho bloque desde la definición de ambos selectores. De esta forma, evitaríamos repetir reglas, logrando un código más compacto. Y, lo que es más importante: es más mantenible. Si ahora, por ejemplo, tienes que cambiar el color de fondo de las cajas, puede que cambies uno, pero olvides cambiar el otro, lo que te daría un resultado final diferente al esperado.

Vamos a ver cómo podemos compactar el SASS en mixins_1.scss:

Como ves, el bloque de código con las líneas comunes lo definimos en un mixin al que le damos un nombre de nuestra elección (cajas, en este ejemplo). El bloque se declara con la directiva @mixin, seguida del nombre elegido, y con las reglas de estilos entre llaves. La sintaxis general, por tanto, queda así:

@mixin nombre_del_mixin {
    // Reglas que conforman el bloque de código del mixin
}

Posteriormente, donde necesitamos disponer de las reglas declaradas en el mixin usamos la directiva @include, seguida del nombre del mixin que deseamos incluir.

Si haces la prueba, verás que este código SASS se transpila a CSS con el mismo resultado que cuando creamos el SASS sin usar mixins, pero el fichero scss ocupa mucho menos. Y, en este caso, sólo estamos usando dos selectores, pero si tuviéramos más, la diferencia de compactación del código sería mayor.

ATENCIÓN. Dado que un mixin se define con un nombre, tal como hemos visto, en un mismo código SASS puedes crear todos los mixins que desees. Una vez declarado un mixin, puedes incluirlo, referenciándolo con su nombre, en cuantas partes del código te haga falta.

USANDO LOS MIXINS CON ARGUMENTOS

El empleo de los mixins es muy útil tal cómo lo hemos visto hasta ahora. Sin embargo, aún puede serlo mucho más si le añadimos argumentos mediante los que le pasemos valores para ciertas reglas CSS. Por seguir con el ejemplo que estamos viendo, imagina ahora que queremos configurar las dos cajas que hemos definido mediante CSS, de forma que su color de fondo y de texto sea diferente. observa el código mixins_2.css:

Vamos a fijarnos en las líneas resaltadas. Observa que, en la declaración del mixin, ponemos unos paréntesis con dos argumentos (pueden ser dos, o los que nos hagan falta; el número no está limitado). Los argumentos se nombran, igual que las variables, precediéndolos del signo $. Ves la forma correcta de declararlos en la línea 4 del listado.

Ahora observa las líneas 14 y 15, donde se declaran, respectivamente, los colores de texto y de fondo. Fíjate que, en lugar de establecer unos valores fijos, le asignamos las dos variables que pasan como argumentos del mixin.

Lo siguiente que tienes que fijarte es en las líneas 25 y 35, donde se invoca el mixin mediante el uso de la directiva @include. Como la declaración del mixin emplea dos argumentos, al incluirlo debemos pasarle dos valores entre paréntesis. Así, cada vez que incluyamos el mixin, el primer valor pasa al primer parámetro, y el segundo valor pasa al segundo parámetro. Como ves, esto nos da mucha más flexibilidad a la hora de usar el mixin, ya que, con el mismo bloque de código podemos obtener resultados completamente diferentes, como se ve a continuación:

VALORES POR DEFECTO

Cuando declaramos un mixin con una lista de parámetros, podemos emplear valores por defecto, declarando el parámetro como si fuera una variable. Observa lo que hacemos en mixins_3.scss:

Mira, en primer lugar, la línea 4. Observa que al segundo parámetro le damos un valor por defecto. En la línea 25 ves que sólo se declara el primer argumento al invocar al mixin, por lo que, como segundo argumento, se toma el valor por defecto. En la línea 35, en cambio, se invoca al mixin pasándole dos valores, así que el segundo valor sobrescribe el valor por defecto de la declaración. El resultado es el mismo que en el caso anterior.

MÁS DE UN VALOR POR DEFECTO

Aún podemos rizar más el rizo. Observa el siguiente listado, llamado mixins_4.scss:

Fíjate en la línea 4, donde se declara el mixin. Cada uno de los dos parámetros tiene un valor por defecto. Observa la línea 25, donde se incluye el mixin, sin pasarle argumento alguno. Por lo tanto, en esta llamada, se toman ambos valores por defecto.

La parte graciosa está en la línea 35. En esta llamada, queremos aceptar el valor por defecto para el primer parámetro, pero no para el segundo. En este caso, lo que tenemos que hacer es emplear el nombre del parámetro cuyo valor por defecto queremos sobrescribir con el que pongamos. De este modo, SASS ya sabe que para el parámetro $BackGroundColor aceptamos el valor por defecto, pero para el parámetro $TextColor sobrescribimos el valor con el que ponemos como argumento en la invocación. El resultado es el siguiente:

Como ves, para el color de fondo se asume el valor por defecto en ambos casos, pero no así para el color del texto.

IMPORTANDO LOS MIXINS

Al igual que ocurría con las variables, los mixins pueden definirse en un partial, que será importado desde el fichero principal de SASS. Vamos a recrear este escenario colocando la declaración del mixin en un archivo cuyo nombre será _auxiliar_mixins.scss (observa que, al ser un partial, precedemos, como ya sabemos, el nombre de un guión bajo, para indicarle al transpilador que ese archivo no se debe transpilar por sí mismo, sino como parte de otro archivo principal).

Ahora vamos a ver el fichero principal que, a su vez, importa al que acabamos de crear. Lo hemos llamado mixins_5.scss:

Cuando hacemos la transpilación, el resultado es un fichero CSS perfectamente válido, con todas las reglas correctamente declaradas, cada una bajo su selector, como ves en mixins_5.css:

CONCLUYENDO

En este artículo hemos conocido una de las herramientas más interesantes que nos ofrece SASS para optimización de código: los mixins. Hemos visto como usarlos con y sin parámetros, como importarlos desde partials, y como nos ayudan a conseguir un código más compacto y legible. Los archivos para que experimentes con estas técnicas están disponibles en este enlace. En el próximo capítulo empezaremos a hablar de otro modo de crear bloques de código SASS, con otra finalidad diferente, que yo encuentro fascinante para el desarrollo de hojas de estilos: las funciones.

   

Deja un comentario