Sass 變量的做用域

變量是最基礎也最經常使用的東西，例如一段 CSS 中有不少相同的顏色值（例如 #050709），傳統的 CSS 中，你就須要不斷的去複製這個值，而在 Sass 中，你就能夠先在對應文件頭部（通常會有一個 var.scss 文件專門用來放置變量等）聲明一個變量 $co : #050709 而後在後面須要使用這個顏色值的時候，就能夠直接寫上 color: $co; 就能夠了。

不單單須要輸入的字符少了，並且根據規則起變量名讓人更加易懂，此外後期須要修改這一種顏色的時候，只須要修改一下變量值便可所有修改，不須要搜索替換了。

可是這裏咱們要討論的是 Sass 中變量的做用域問題，即變量放置的位置前後、同名變量之間的相互影響問題。

使用下面這段代碼便可進行測試：

$width: 10px; .wrap{ /*$width: 20px;*/ .main{ width: $width; } .sidebar{ /*$width: 30px;*/ width: $width; } /*$width: 20px;*/ } .content{ width: $width; } /*$width: 20px;*/ 

進行編譯以後輸出（無視註釋掉的東西）：

.wrap { /*$width: 20px;*/ /*$width: 20px;*/ } .wrap .main { width: 10px; } .wrap .sidebar { /*$width: 30px;*/ width: 10px; } .content { width: 10px; } /*$width: 20px;*/ 

如今是理所固然的經常使用模式，在最上面設置了變量爲 10px，下面引用的地方全都變成了 10px。咱們如今註釋掉第一行的變量，而後解開最後一行的變量聲明。

結果編譯報錯不經過，提示 Undefined variable 說明變量聲明必須在調用變量語句的上面，這樣才能正確的調用變量。

如今咱們恢復到初始狀態，開始測試變量是否具備相似塊級做用域的特性。把上面全部註釋取消掉：

$width: 10px; .wrap{ $width: 20px; .main{ width: $width; } .sidebar{ $width: 30px; width: $width; } $width: 20px; } .content{ width: $width; } 

編譯後獲得：

.wrap .main { width: 20px; } .wrap .sidebar { width: 30px; } .content { width: 20px; } 

這說明，Sass 中的變量沒有塊級做用域特性，而是隨執行隨覆蓋隨調用。調用的前面沒有變量聲明，就報錯，有不少變量聲明，就調用在它上面離它最近的變量值。