最近在新專案中引入了SASS來編寫樣式程式碼，心想既然用到了這種高階貨，就要用得巧用得妙，不能單純地只是把常用屬性定義成變數或定義重用的程式碼塊等等。因此在編寫樣式時，都要時刻提醒自己是不是可以巧用SASS來解決一些問題。

這次遇到的需求是，<ul></ul>裡有7個重複的<li></li>，這7個<li></li>需要應用7中不同顏色的background-color，需求很簡單，如下是簡易的效果圖。

針對這個需求，有許多種實現方式，包括傳統的CSS寫法和我們今天要講的使用SASS的編寫方法，具體如下：

HTML結構為：

<div id="main-container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>

1. 傳統CSS實現

最簡單的當然是為每一個<li></li>都加一個用於區分不同background-color的類， 每個類裡應用上不同的背景顏色就OK啦，這我們沒必要多說了。

2. 使用SASS多值變數： list

list型別有點像js中的陣列。list資料可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關於list資料操作還有很多其他函式如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具體可參考sass Functions（List Functions）。

本需求實現程式碼如下：

// 將背景顏色值定義成變數
$red : #FF0000;
$orange : #FFA500;
$yellow : #FFFF00;
$green : #008000;
$bluegreen : #00FFFF;
$blue : #0000FF;
$purple : #800080;

// 定義一個list儲存背景顏色
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;

// 使用SASS for迴圈語句為每一個li設定background-color
@for $i from 1 to length($bgcolorlist)+1 {
    #main-container ul li:nth-child(#{$i}) {
        background-color: nth($bgcolorlist,$i);
    }
}

這裡需要注意的幾點是：

• from後的數值，即迴圈開始的i值不能為0，這是語法規定的。
• for迴圈從i = 1開始，但並不是在i = length($bgcolorlist)時結束，我們本來是需要迴圈7次，但如果我們寫成to length($bgcolorlist)的話，只會迴圈6次，因此是to length($bgcolorlist)+1。

3. 使用SASS多值變數： map

當然，解決這個需求，我們也可以使用SASS中的map。map型別有點像js中的物件。map資料以key和value成對出現，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。關於map資料還有很多其他函式如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具體可參考sass Functions（Map Functions）。

本需求實現程式碼如下：

// 將背景顏色值定義成變數
$red : #FF0000;
$orange : #FFA500;
$yellow : #FFFF00;
$green : #008000;
$bluegreen : #00FFFF;
$blue : #0000FF;
$purple : #800080;

//將背景顏色以鍵值對的形式存在map中
$bgcolorlist : (
    1: $red,
    2: $orange,
    3: $yellow,
    4: $green,
    5: $bluegreen,
    6: $blue,
    7: $purple);

// 使用SASS each語法為每一個li設定background-color
@each $i, $color in $bgcolorlist {
    #main-container ul li:nth-child(#{$i}) {
        background-color: $color;
    }
}

是不是很簡單呢~其實這種方法本質上和使用list的方式是一樣的。

OK，就這麼多吧，當然這個小需求的實現方式遠不止這些，選一種自己喜歡的就好啦，都so easy~