Sass 变量默认范围

Posted 2023-03-07

【中文标题】Sass 变量默认范围

【英文标题】：Sass variable default scope

【发布时间】：2011-07-25 02:30:56

【问题描述】：

我在跨范围使用 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 在 mixin foo 中被定义为 'red' !default。我希望导入 mixin 会将 $val 设置为“红色”，除非它已经定义。但是，在 class1 中，$val 在本地定义为“green”，导入 mixin foo 会用“red”覆盖它。在其他类中，在将 $val 全局定义为 'black' 之后，导入 mixin 会按预期工作，并且 $val 会保留其已定义的值。

我做错了什么？

【参考方案1】：

在 class1 中本地定义 $val: 'green' 不会改变 mixin 中的 $val: 'red' !default，因为它会查找全局 $val。此时，还没有定义全局 $val。

然后全局 $val 被定义为“黑色”。在 mixin 中的 $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'

【讨论】：

非常烦人的行为和 SASS 团队从 JS 借用这个范围的奇怪决定，恕我直言。