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''