15

スコープ全体で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は、mixinfooでは'red'！defaultとして定義されています。ミックスインをインポートすると、すでに定義されていない限り、$valが「red」に設定されると思います。ただし、$valがローカルで「green」として定義されているclass1では、mixinfooをインポートすると「red」で上書きされます。他のクラスでは、$ valを「黒」としてグローバルに定義した後、ミックスインのインポートは期待どおりに機能し、$valはすでに定義された値を保持します。

私は何が間違っているのですか？

4

1 に答える 1

21

class1でローカルに定義しても、グローバルな$ valが検索されるため、ミックスインで$val: 'green'は変更されません。$val: 'red' !defaultこの時点では、グローバル$valは定義されていません。

次に、グローバル$valは「黒」として定義されます。このミックスインの$valの後、グローバル$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'
于 2011-07-23T10:44:56.247 に答える