jairogarcíarincón

Variables


2.71K

Introducción

En este apartado introduciremos los siguientes conceptos:

  • Variables
  • Variables por defecto (!default)
  • Ámbito de variables


Variables

El uso de variables en Sass/SCSS es bastante simple: asignamos un valor a un nombre que empiece por $ (como en PHP) y luego podemos referirnos a él en cualquier lugar en vez de referirnos al valor.

Además de la evidentemente reducción de repeticiones y facilidad de refactorización, las variables nos van a permitir realizar operaciones matemáticas, configurar librerías y mucho más.

Las declaraciones de variable son como las declaraciones de propiedades, esto es, :, pero al contrario que las propiedades, las variables se pueden definir en cualquier lugar, sea dentro o fuera de las reglas.

Es importante saber que los nombres de variables son tratados como el resto de identificadores Sass, de modo que los guiones bajos y medios son tratados como iguales, y por tanto $font_size y $font-size harán referencia a la misma variable.

SCSS



Sass



CSS



Importante: No hay que confundir las variables de Sass/SCSS con las variables de CSS. Éstas últimas pertenecen a CSS puro pero, como es sabido, tienen muchos problemas de compatibilidad entre navegadores, mientras que las variables de Sass/SCSS se trasladan a CSS puro mediante compilación, pero no aparecen en el archivo de salida, con lo que podemos utilizarlas sin problemas de compatibilidad.


Variables por defecto (!default)

Normalmente cuando asignas un valor a una variable que ya tenía un valor, éste se sobre-escribe. En algunos casos, como cuando estemos escribiendo librerías, puede que necesitemos que a la variable se le asigne un valor solo si no estaba definida o su valor era null. Para ello utilizamos el flag !default:

SCSS



Sass



CSS




Ámbito de variables

Como en cualquier lenguaje de programación, debemos considerar el ámbito de las variables. De este modo, cualquier variable declarada al principio de la hoja de estilos será considerada como global y accesible desde cualquier lugar a partir del cual ha sido declarada (incluso en otra hoja de estilos).

SCSS



Sass



CSS




Por el contrario, una variable declarada dentro de un bloque (llaves en Sass o código indentado en SCSS) será considerada como local y solo será accesible dentro de dicho bloque. Además, dicha variable local podría tener incluso el mismo nombre que una global y no afectaría a la anterior. es lo que se conoce como variable local de tipo shadow.

SCSS



Sass



CSS




También es posible modificar el valor de una variable global dentro de un ámbito local o bloque (por ejemplo, para un mixin) mediante el uso del flag !global.

SCSS



Sass



CSS



Importante: El flag !global no debe usarse para nuevas variables, solo para aquellas que ya estaba declaradas como globales con anterioridad.


Por último, merece una mención especial el ámbito de variables dentro de las estructuras de control, ya que en este caso lo que hará no será crear una variable local de tipo shadow sino asignar un valor a la variable global original (siempre que dicha variable ya exista, claro).

SCSS



Sass



CSS




Referencias


Publicado el 21 de Mayo de 2022

csscss3sassscsslesspreprocesadores