variables - scss - Alcance predeterminado variable de Sass

scss documentation

Question

Tengo un problema con el uso de valores predeterminados de variables en Sass en todos los ámbitos. Mi ejemplo de prueba es:

@mixin foo { 
        $val: ''red'' !default; 
        .bar { 
                color: $val; 
        } 

} 

@include foo; 
.class1 { 
        $val: ''green''; 
        @include foo; 
        .class11 { 
                @include foo; 
        } 
} 

$val: ''black''; 
.class2 { 
        @include foo; 
} 

.class3 { 
        $val: ''blue''; 
        @include foo; 
} 

.class4 { 
        @include foo; 

}

Es compila a:

.bar { 
  color: "red"; 

} 

.class1 .bar { 
  color: "red"; 
} 

.class1 .class11 .bar { 
  color: "red"; 
} 

.class2 .bar { 
  color: "black"; 
} 

.class3 .bar { 
  color: "blue"; 
} 

.class4 .bar { 
  color: "blue"; 

}

Como puede ver, la variable $ val se define como ''roja''. Por defecto en mixin foo. Espero que la importación de mixin establezca $ val en ''rojo'' a menos que ya esté definido. Sin embargo, en la clase 1, donde $ val se define localmente como ''verde'', al importar el mixin foo se sobrescribe con ''rojo''. En otras clases, después de la definición global de $ val como ''negro'', la importación de la mezcla funciona como se espera y $ val conserva su valor ya definido.

¿Qué estoy haciendo mal?

Answer 1

Definir $val: ''green'' localmente en class1 no altera $val: ''red'' !default en mixin, porque busca global $ val. En este punto, no se ha definido ningún $ val global.

Entonces global $ val se define como ''negro''. Después de $ val en mixin, busque $ val global. En este punto, $ val global se ha definido como ''negro''.

La definición de $ val de nuevo localmente alterará global $ val que se ha definido.

@mixin foo 
  $val: ''red'' !default // defined locally
  .bar
    color: $val

@include foo // $val in mixin foo look for global $val. no global $val found, then ''red''

.class1
  $val: ''green''
  @include foo // $val in mixin foo look for global $val. no global $val found, then ''red''
  color: $val // local $val ''green''
  .class11 
    @include foo // $val in mixin foo look for global $val. no global $val found, then ''red''

$val: ''black'' // defined globally at the first time

.class2 
  @include foo // $val in mixin foo look for global $val. $val found, ''black''

.class3
  $val: ''blue'' // change the gobal $val
  @include foo // $val in mixin foo look for global $val. $val found, ''blue''

.class4
  @include foo // $val in mixin foo look for global $val. $val found, ''blue''