[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;//調用局部變量
}
}
什麼時候聲明變量？
我的建議，創建變量只適用於感覺確有必要的情況下。不要為了某些駭客行為而聲明新變量，這絲毫沒有作用。只有滿足所有下述標準時方可創建新變量：
- 該值至少重複出現了兩次；
- 該值至少可能會被更新一次；
- 該值所有的表現都與變量有關（非巧合）。
基本上，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量。
溫馨小提示：您在學習sass 時，除了在我們網頁上可以做練習，還有一個便利在線編輯器網址如下：