Portée variable par défaut Sass

Question

J'ai un problème avec l'utilisation de valeurs par défaut variables dans Sass sur des étendues. Mon exemple de test est:

@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; 

} 

Il est compilé en:

.bar { 
    color: "red"; 

} 

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

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

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

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

.class4 .bar { 
    color: "blue"; 

} 

Comme vous pouvez le voir, la variable $ val est définie par défaut 'rouge' dans le mixin foo!. Je m'attends à ce que l'importation du mixin mette $ val à "rouge" à moins qu'il ne soit déjà défini. Cependant, dans class1, où $ val est localement défini comme 'green', l'importation de la fonction mixin foo l'écrase avec 'red'. Dans d'autres classes, après la définition globale de $ val en tant que 'noir', l'importation du mixin fonctionne comme prévu et $ val conserve sa valeur déjà définie.

Qu'est-ce que je fais mal?

Answer 1

La définition de $val: 'green' localement dans la classe 1 n'altère pas $val: 'red' !default dans mixin, car elle recherche global $ val. À ce stade, aucun $ global n'a été défini.

Ensuite, global $ val est défini comme «noir». Après ce $ val dans mixin chercher global $ val. À ce stade, global $ val a été défini comme «noir». La définition de $ val à nouveau localement modifiera le $ $ val défini.

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