Sass 中變量的作用域在過(guò)去幾年已經(jīng)發(fā)生了一些改變。直到最近，規(guī)則集和其他范圍內(nèi)聲明變量的作用域才默認(rèn)為本地。如果已經(jīng)存在同名的全局變量，從 3.4 版本開(kāi)始，Sass 已經(jīng)可以正確處理作用域的概念，并通過(guò)創(chuàng)建一個(gè)新的局部變量來(lái)代替。

全局變量與局部變量

先來(lái)看一下代碼例子：

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

css 的結(jié)果：

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

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

$color:orange !default;

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

除此之外，Sass 現(xiàn)在還提供一個(gè) !global 參數(shù)。!global 和 !default 對(duì)于定義變量都是很有幫助的。我們之后將會(huì)詳細(xì)介紹這兩個(gè)參數(shù)的使用以及其功能。

全局變量的影子

當(dāng)在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)、混合宏內(nèi)...）聲明一個(gè)已經(jīng)存在于全局范圍內(nèi)的變量時(shí)，局部變量就成為了全局變量的影子。基本上，局部變量只會(huì)在局部范圍內(nèi)覆蓋全局變量。

上面例子中的 em 選擇器內(nèi)的變量 $color 就是一個(gè)全局變量的影子。

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

什么時(shí)候聲明變量？

我的建議，創(chuàng)建變量只適用于感覺(jué)確有必要的情況下。不要為了某些駭客行為而聲明新變量，這絲毫沒(méi)有作用。只有滿足所有下述標(biāo)準(zhǔn)時(shí)方可創(chuàng)建新變量：

1. 該值至少重復(fù)出現(xiàn)了兩次；
2. 該值至少可能會(huì)被更新一次；
3. 該值所有的表現(xiàn)都與變量有關(guān)（非巧合）。

基本上，沒(méi)有理由聲明一個(gè)永遠(yuǎn)不需要更新或者只在單一地方使用變量。

溫馨小提示：您在學(xué)習(xí) sass 時(shí)，除了在我們網(wǎng)頁(yè)上可以做練習(xí)，還有一個(gè)便利在線編輯器網(wǎng)址如下：

http://sassmeister.com/