定義一個sass變量
可以說，變量是一個編程語言的基礎。所以對於sass來說，變量肯定是濃墨重彩的其中一筆，當然函數也是。那我們如何聲明定義一個sass的變量呢？
- 變量的符號
$ - 變量名稱
- 變量的值
那我們看一下如何使用變量
$color: white;
body{
color: $color;
}
div{
color: $color;
}
就是這么簡單，當然這個例子很簡單，所以暫時看不出它所帶來的非凡的效果。
全局變量與局部變量
global
sass中的變量也是分為全局與局部的，在代碼塊內聲明的變量只會在代碼塊內生效，除非為其添加了!global。前面關於全局和局部變量，學過一點js的都應該懂，這里就不再贅述。我們直接看看如何在局部變量里聲明一個全局的變量。
$color: white;
body{
$partial-color: black !global; //若沒有!global則會報錯，無法編譯
$color: red;
}
div{
color: partial-color;
color: $color; //編譯后仍然是white，說明並未收到上一個代碼塊的影響
}
default
當然還有一個類似的命令是!default，直接根據語意即可知，它是說明變量值為默認值。任何的值都可以覆蓋默認值，即使默認值出現在后面。
$color: red;
$color: blue !default;
body{
color: $color //編譯后為red
}
這個default對於組件化的開發是有很大的幫助的，大家也可以思考思考。非default值出現在后面，則是普通的覆蓋。若是出現在前面，則是sass自動編譯，使用非default值來覆蓋default。這個操作會讓組件化開發的時候，更易於控制。
特殊變量
一般變量的值是屬性值，我們可以拿來直接用。但是如果變量的值是屬性名的話，我們就需要使用一個特殊的表達式#{$variab}，可以直接看個例子。
$white-color: white;
$black-color: black;
body{
.div-#{$white-color}: $white-color;
.div-#{$black-color}: $black-color;
}
------編譯后------
body {
.div-white: white;
.div-black: black;
}
這個功能可是十分有用啊，這樣我們就可以很舒服的通過變量來控制屬性名了。
&操作符
個人感覺&操作符在javascript里，和this指針差不多。這個怎么說呢，就是&變量會自動轉化成父層的元素，這樣在某些地方可以大有好處，尤其是偽元素。直接來看看例子吧。
$base-color: black;
$hover-color: red;
.btn{
color: $base-color;
&:hover{
color: $hover-color;
}
}
------編譯后------
.btn {
color: black;
}
.btn:hover {
color: red;
}
巧妙利用&操作符，會讓我們使用起來更加靈活，自如。
多值變量
這種變量可也真是讓人漲姿勢，分為list變量和map變量。對應javascript來說，也就是數組和對象。下面一一來簡單介紹一下。
list
list中的值，可以用三種形式來區分，空格、逗號還有小括號。其中若靈活混用，則可以做成類似二維數組的變量，如[['white', 'black'] ['red', 'blue']]。那使用什么辦法取值呢，sass提供了一個nth($variable, index)的方法。一起來看看吧。
$color: white black red blue;
a{
color: nth($color, 2);
&:hover{
color: nth($color, 4);
}
}
------編譯后------
a {
color: black;
}
a:hover {
color: blue;
}
是不是非常的酷！這樣可以讓我們的變量更加靈活。當然list數據的操作也有非常的自帶的函數，想要更多了解的也可以自行查閱。
map
其實map也是大同小異，只是map是根據key和value做更多更自由的事情。這里我就引用一下別人的例子，我覺得這個例子是十分有特色的，也可以省下非常多的時間。
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
------編譯后------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
這里也看到了一個內置函數，@each, $header和$size，則分別代表着循環過程中的key和value。相信大家也是能看得出來的。我們通過一個map，可以如此簡潔的定義好三個相似的樣式，多讓人舒心。
關於sass常用的變量，也差不多講完了。語法的學習，必須配合實際操作。如果大家對sass感興趣，可以毫不猶豫加入其中，一定會帶你給無限驚喜。