jairogarcíarincón
En este apartado introduciremos los siguientes conceptos:
- Variables
- Variables por defecto (!default)
- Ámbito de 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
38-variables.scss
Sass
39-variables.sass
CSS
40-variables.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.
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
41-variables.scss
Sass
42-variables.sass
CSS
43-variables.css
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
44-variables.scss
Sass
45-variables.sass
CSS
46-variables.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
47-variables.scss
Sass
48-variables.sass
CSS
49-variables.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
50-variables.scss
Sass
51-variables.sass
CSS
52-variables.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
53-variables.scss
Sass
54-variables.sass
CSS
55-variables.css
Publicado el 21 de Noviembre de 2024
csscss3sassscsslesspreprocesadores