Sass學習之路(5)——變數

1.定義變數:
Sass中定義變數的關鍵字是'$'(畢竟程式員缺錢)，並使用冒號(:)進行賦值，例如：

1. $width:200px;//定義了一個名為width的變數，值為200px  

2.普通變數和預設變數:

普通變數便是我們在大括弧外用上面的方式聲明的變數，可全局使用。

預設變數需要在聲明的變數後加上  !default，如下：

1. $lineHeight:1.5 !default;  

預設變數可以理解為給變數一個初始值，在被使用到時，如果該變數沒有值，則使用這個預設值。在預設變數前或後定義普通變數，都會覆蓋掉預設變數的值。

1. $lineHeight:2;  
2. $lineHeight:1.5 !default;  
3. .line{  
4. line-height:$lineHeight;  
5. }  
6. //結果就是:  
7. .line{  
8. line-height:2;  
9. }  

其實也可以把預設變數理解成最低優先順序的變數，優先順序順序：!default<普通變數<!important

3.局部變數和全局變數

全局變數：在選擇器、函數、混合巨集等外面定義的變數。

局部變數：其實就是上邊的內容，反過來啦。

這裡我們來看一個例子：

1. //SCSS  
2. $color: orange !default;//定義全局變數  
3. .block {  
4.   color: $color;//調用全局變數  
5. }  
6. em {  
7.   $color: red;//定義局部變數  
8.   a {  
9.     color: $color;//調用局部變數  
10.   }  
11. }  
12. span {  
13.   color: $color;//調用全局變數  
14. }  

編譯出來的結果如下：

1. //CSS  
2. .block {  
3.   color: orange;  
4. }  
5. em a {  
6.   color: red;  
7. }  
8. span {  
9.   color: orange;  
10. }  

可以看出在選擇器內部定義的局部變數優先順序更高。