Размер переменной по умолчанию Sass

У меня проблема с использованием переменных по умолчанию в Sass по областям. Мой тестовый пример:

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

}

Он компилируется:

.bar { 
  color: "red"; 

} 

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

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

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

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

.class4 .bar { 
  color: "blue"; 

}

Как вы можете видеть, переменная $val определяется как "red"! default в mixin foo. Я ожидаю, что импорт mixin установит значение $val в значение "red", если оно уже не определено. Однако в классе 1, где $val локально определяется как "зеленый", импорт mixin foo перезаписывает его "красным". В других классах, после глобального определения $val как "черного", импорт mixin работает как ожидалось, а $val сохраняет уже определенное значение.

Что я делаю неправильно?

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

Ответ 1