[Sass]局部變量和全局變量

[Sass]局部變量和全局變量

Sass 中變量的作用域在過去幾年已經發生了一些改變。直到最近，規則集和其他范圍內聲明變量的作用域才默認為本地。如果已經存在同名的全局變量，從 3.4 版本開始，Sass 已經可以正確處理作用域的概念，並通過創建一個新的局部變量來代替。

全局變量與局部變量

先來看一下代碼例子：

//SCSS
$color: orange !default;//定義全局變量(在選擇器、函數、混合宏...的外面定義的變量為全局變量)
.block {
  color: $color;//調用全局變量
}
em {
  $color: red;//定義局部變量
  a {
    color: $color;//調用局部變量
  }
}
span {
  color: $color;//調用全局變量
}

 

css 的結果：

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

 

上面的示例演示可以得知，在元素內部定義的變量不會影響其他元素。如此可以簡單的理解成，全局變量就是定義在元素外面的變量，如下代碼：

$color:orange !default;

 

$color 就是一個全局變量，而定義在元素內部的變量，比如 $color:red; 是一個局部變量。

除此之外，Sass 現在還提供一個 !global 參數。!global 和 !default 對於定義變量都是很有幫助的。

全局變量的影子

當在局部范圍（選擇器內、函數內、混合宏內...）聲明一個已經存在於全局范圍內的變量時，局部變量就成為了全局變量的影子。基本上，局部變量只會在局部范圍內覆蓋全局變量。

上面例子中的 em 選擇器內的變量 $color 就是一個全局變量的影子。

//SCSS
$color: orange !default;//定義全局變量
.block {
  color: $color;//調用全局變量
}
em {
  $color: red;//定義局部變量（全局變量 $color 的影子）
  a {
    color: $color;//調用局部變量
  }
}

 

什么時候聲明變量？

我的建議，創建變量只適用於感覺確有必要的情況下。不要為了某些駭客行為而聲明新變量，這絲毫沒有作用。只有滿足所有下述標准時方可創建新變量：

1. 該值至少重復出現了兩次；
2. 該值至少可能會被更新一次；
3. 該值所有的表現都與變量有關（非巧合）。

基本上，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量。