提到變數，很多人不禁想到很多如JavaScript、PHP等等，但是今天，SASS中也有變數的概念，這也是SASS迷人的地方之一。有了變數，我們就可以簡單改改變數就可以讓整個樣式換一種風格，而不需要大篇幅的複製貼上改樣式了。

　變數的語法

        使用方法就是在“$”後新增變數名稱然後與變數值用冒號“:”連結。如下

　　SASS程式碼

$width : 10px;

.meng {
	width : $width;
}

　　編譯後的CSS程式碼

.meng {
  width: 10px;
}

　變數的作用域

　　變數只在他們定義的級別巢狀選擇。如果他們定義以外的任何巢狀選擇，他們是隨處都可以用的。但是若定義在巢狀之中，那麼這個變數就只能服務於這個巢狀之內的屬性了。如下

　　SASS程式碼

.long {
	$width : 10px;
	.meng {
		width : $width;
		height : $height;

	}
}
.zhan {
	height:$height;
}
.xiao {
	width:$width;
}

　　編譯後的CSS程式碼

.long .meng {
  width: 10px;
  height: 10px;
}

.zhan {
  height: 10px;
}

　　如上所見，在編譯的時候，是會報錯的。因為類名“.xiao”寬度的變數“$width”是在類名“.long”巢狀之中，在外面是找不到的，這就是變數的作用域問題。所以會報錯的。

　變數的預設值(!default)

　　在日常編輯過程中，可以給變數新增預設值(!default)標誌。如果在其變數值沒有單獨設定，那麼就用新增預設值的變數值。若設定了，那麼就用重新設定的變數值。如下

　　SASS程式碼

$width : 10px !default;

.meng {
	width : $width;
}

.long {
	$width :20px;
	width : $width;
}

$width :30px;
.xiao {
	width : $width;
}

$height : 20px;
$height : 10px !default;
.zhan {
	width : $width;
	height : $height;
}
 

　　編譯後的CSS程式碼

.meng {
  width: 10px;
}

.long {
  width: 20px;
}

.xiao {
  width: 30px;
}

.zhan {
  width: 30px;
  height: 20px;
}

　　上面的例項告訴我們，不管變數在哪裡，只要重新設定新的值了，那麼就不會再用那個帶有量的預設值(!default)的變數值。

　變數的差值應用(  #{}  )

　　變數不僅可以用在屬性值，還可以用在選擇器或者是屬性上面。下面是變數使用在選擇器上的小例項

　　SASS程式碼

$class : meng;

.#{$class} {
	width : 20px;
}

　　編譯後的CSS程式碼

.meng {
  width: 20px;
}

　　通過上面的例項可以看出，使用這個小技巧可以方便省去不少的時間，因為平時我們編寫的時候會有很多類似的東西，我們都可以用變數來把他們一一代替。下面是變數使用在屬性上的小例項

　　SASS程式碼

$class : height;
$lineHeight :30px;
$fontSize : 20px;

.meng {
    #{$class} : 20px;
    font:bold #{$lineHeight}/$fontSize "Arial";
}

　　編譯後的CSS程式碼

.meng {
  height: 20px;
  font: bold 30px/20px "Arial";
}

　宣告多個變數

　　變數可以一個一個的宣告，也可以多個一起宣告。多個一起宣告，用起來是比較方便的，特別是宣告相似功能的變數。如下

　　SASS程式碼

$linkSize: 30px 20px !default;

a{
   font-size:nth($linkSize,1);

    &:hover{
        font-size:nth($linkSize,2);
    }
}

　　編譯後的CSS程式碼

a {
  font-size: 30px;
}
a:hover {
  font-size: 20px;
}

　　SASS詳解之變數就為大家介紹到這裡了，希望大家看完SASS詳解之變數會對SASS中的變數有所瞭解。只有瞭解了SASS詳解之變數，才能在學習SASS的道路上走得更遠。