Sass переменная область по умолчанию - PullRequest
Новая
       8

Sass переменная область по умолчанию

15 голосов
/ 29 марта 2011

У меня проблема с использованием переменных значений по умолчанию в 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', если он уже не определен.Однако в class1, где $ val локально определяется как «зеленый», импорт mixin foo заменяет его на «красный».В других классах после глобального определения $ val как «черного» импорт миксина работает как положено, и $ val сохраняет уже определенное значение.

Что я делаю не так?

1 Ответ

21 голосов
/ 23 июля 2011

Определение $val: 'green' локально в class1 не меняет $val: 'red' !default в mixin, потому что он ищет глобальный $ val.На данный момент глобальный $ val не определен.

Тогда глобальный $ val определяется как «черный».После этого $ val в mixin ищет глобальный $ val.На данный момент глобальный $ val был определен как «черный».

Повторное локальное определение $ val изменит глобальный $ 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'
...