Interpolación de variables en SASS

En este artículo vamos a exponer un concepto simple, pero muy importante en el desarrollo de hojas de estilo con SASS. La interpolación de variables es un mecanismo para evaluar una variable a través de su nombre. Si estás familiarizado con JavaScript o PHP conoces, sin duda, la instrucción eval(). Es el mismo concepto, solo que en SASS (como en otros lenguajes) se conoce con el término de interpolación.

Si no estás familiarizado con el concepto, lo primero que te viene a la mente es «Bueno, si yo uso una variable refereciándola con su nombre, obtengo su valor directamente. No necesito evaluarla, o interpolarla, o lo que sea». Tienes razón, y no la tienes. En la mayoría de los casos es así. Sin embargo, en determinados contextos, usamos el nombre de una variable como una cadena o, dependiendo de dónde la referenciemos, SASS lo interpreta así. En el artículo anterior hemos visto un ejemplo en el que necesitábamos interpolar las variables, en  lugar de referenciarlas sin más, para que el código funcionara del modo esperado.

En este artículo veremos cómo se usa la interpolación, y como puede ayudarnos.

POR QUÉ USAR INTERPOLACIONES

Las interpolaciones de SASS nos permiten crear variables cuyo contenido puede ser evaluado en tiempo real para poder referenciar propiedades CSS o selectores de una forma mucho más flexible. Para entender lo que significa esto, vamos a ver un ejemplo clásico de un archivo SASS que define las reglas para un selector, del modo tradicional, sin emplear interpolaciones. Lo llamamos no_interpolations.scss:

La transpilación a CSS es, como cabría esperar, la siguiente:

Ahora vamos a flexibilizar, por ejemplo, el nombre del selector, declarándolo en una variable. Observa el código interpolations_1.scss:

Observa las líneas resaltadas, y los comentarios ilustrativos. Mira en la línea 7 como guardamos, en una variable, el nombre de un selector. Luego, en la línea 13, donde declaramos un set de reglas CSS, se las asignamos a la variable que contiene el nombre del selector. Como está interpolada (encerrada entre #{ y }), el transpilador «sabe» que tiene que buscar su contenido y usar dicho contenido como nombre de selector al que aplicarle el set de reglas CSS. Si ahora transpilas este código obtendrás el mismo archivo CSS que en el caso anterior.

ATENCIÓN. Este ejemplo, así como aparece, no tiene mucho valor, más allá del meramente didáctico. En la práctica parece que hemos usado más código (y nos hemos complicado más la vida) para obtener un resultado que antes habíamos obtenido de forma más simple. Sin embargo, es importante que te familiarices con esto. Cuando veamos los bucles (y, sí, SASS admite el uso de bucles), verás que esta es una forma muy cómoda de asignar sets de reglas CSS a distintos selectores.

INTERPOLANDO NOMBRES DE REGLAS

De igual forma que podemos interpolar nombres de selectores, también podemos interpolar nombres de reglas CSS, como font-size, border-color, o cualquier otra. Observa el listado interpolations_2.css:

Observa las líneas resaltadas. Como ves, declaramos los nombres de tres propiedades CSS en sendas variables, y luego las usamos en el set de reglas CSS (hemos hecho esto sólo con tres reglas, para no sobrecargar el código; lo justo para ilustrar el funcionamiento). Cuando transpiles verás, una vez más, el mismo resultado original.

ATENCIÓN. Te digo lo mismo que en el caso anterior. Puede parecer que no tiene mucho sentido usar la interpolación sólo por asignarle nombres específicos a las reglas CSS. Sin embargo, en posteriores artículos verás el uso práctico que tiene todo esto. De momento, sólo quédate con el funcionamiento de las interpolaciones.

CONCLUYENDO

Con lo que hemos visto en este artículo conocemos los fundamentos de las interpolaciones. Como te eh comentado, en posteriores arctículos, cuando conozcamos más sobre SASS, verás el enorme potencial que tiene esta característica para conseguir resultados realmente espectaculares. Los códigos de este artículo te los puedes descargar en este enlace.

   

Deja un comentario