sass變量的做用域

嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。

<div class="test">111111111</div>
<div class="test2">111111111</div>

css：

  $fs2:20px;
.test{
  $fs2:30px;
  font-size: $fs2;
}
  .test2{
    font-size: $fs2;
  }

結果：局部的$fs2只在test有用，並無覆蓋全局的，因此在test2中，依然是全局 $fs2的值。

 

將局部變量轉換爲全局變量能夠添加 !global 聲明，這以後使用此變量，將會是改變後的值

$fs2:20px;
  .test{
    $fs2:30px !global;
    font-size: $fs2;
  }
  .test2{
    font-size: $fs2;
  }

結果：test2也是30px

 

局部或者全局重複聲明，後者覆蓋前者：

  $fs2:20px;
  
  .test{
    $fs2:30px;
    font-size: $fs2;
  }
  
  $fs2:30px;
  
  .test2{
    font-size: $fs2;
  }

結果：在全局重複聲明瞭$fs2，test2使用的是後者的30px