Alcance predeterminado variable de Sass

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 se puede ver, $ val variable se define como 'rojo' por defecto en el foo mixin!. 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

La definición de $val: 'green' localmente en la clase 1 no altera $val: 'red' !default en mixin, ya que 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 $ val nuevamente 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'