El Indicador `!global` en SASS

Este artículo explica la bandera !global en SASS.

Explicaremos el mecanismo detallado, ejemplos de uso y precauciones de la bandera !global.

YouTube Video

El Indicador !global en SASS

En SASS, el indicador !global se utiliza para manipular el alcance de las variables. Al entender correctamente este indicador y usarlo adecuadamente, puedes evitar comportamientos inesperados en tu código y mejorar la mantenibilidad.

¿Qué es el Indicador !global?

Normalmente, las variables en SASS tienen un alcance. Por defecto, las variables sólo son válidas dentro del alcance en el que se definen. En otras palabras, si una variable se define dentro de una función o mixin, no se puede acceder a ella fuera de ese alcance.

Sin embargo, al usar el indicador !global, puedes asignar la variable directamente al alcance global. Esto permite que las variables se compartan entre distintos alcances.

Sin el Indicador !global

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• En este código, $color se define en el alcance global, por lo que la propiedad color de .change permanece como red.

CSS de Salida

1.change {
2    color: red;
3}

Con el Indicador !global

Añadamos el indicador !global al mismo ejemplo.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• En este caso, al especificar el indicador !global, el valor de $color se actualiza en el alcance global. Como resultado, la propiedad color de .change pasa a ser blue.

CSS de Salida

1.change {
2    color: blue;
3}

Precauciones de Uso

• Contaminación del Alcance Global El uso excesivo del indicador !global puede provocar conflictos de alcance inesperados y contaminación del alcance global. Esto es especialmente importante en proyectos grandes, donde se debe evitar el uso excesivo de esta bandera.

• Sobrescrituras de valores no intencionadas Al usar la bandera !global, las variables con el mismo nombre pueden ser sobrescritas sin querer en otra parte. Por lo tanto, es necesario un nombramiento coherente y claro de las variables.

Ejemplo práctico

A continuación se muestra un ejemplo del uso correcto de la bandera !global.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• En este código, el mixin set-theme se puede usar para cambiar temas de forma dinámica. Como las variables globales se actualizan para cada tema, se pueden gestionar varios temas de manera flexible.

CSS de Salida

1body {
2    background-color: #333333;
3    color: #666666;
4}

Errores comunes y medidas para evitarlos

Olvidar la bandera

Si olvidas agregar !global, las variables pueden no actualizarse en el ámbito deseado. Asegúrate de añadir la bandera de forma explícita cuando sea necesario.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

Dependencia excesiva del ámbito global

Depender demasiado de la bandera !global puede dificultar la depuración y el mantenimiento del código. Su uso debe mantenerse al mínimo.

Resumen

La bandera !global en SASS es muy útil en situaciones específicas, pero debe usarse con precaución. Al comprender claramente el ámbito de las variables y gestionar correctamente el ámbito global, puedes crear código SASS altamente mantenible.

A continuación se presentan los puntos clave que debes tener en cuenta:.

1. Las variables dependen de su ámbito por defecto.

2. La bandera !global te permite actualizar variables en el ámbito global.

3. Limita el uso de las banderas al mínimo y evita sobrescrituras no intencionadas siempre que sea posible.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video