Sass 中的陣列(List)、物件(Map)

在程式界通常有兩種用來在單一變數中存放多個資料的型態,叫做「陣列」和「物件」(除非像 PHP 那種把全部都歸納成陣列)。

我們可以透過 Sass 裡的 Map 或 List 來歸納這些變數,所以我們就可以更好地整理這些變數,避免分散不易管理。

List - 陣列

雖然說陣列的英文應該是 Array,但是 Sass 裡面只有 List,反正用法都同樣,就索性叫他陣列了。

陣列通常是用來存放沒有鍵名的變數,這意味著當你要從陣列裡取得資料的時候你只能透過索引(1, 2, 3, 4),而不是鍵名(hover, active... 等)。

$color: #000, #FFF, #ABC

// 透過 nth() 使用 List。
p  
    color: nth($color, 2)

// 當然你也可以傳入索引變數。
$index: 3

div  
    color: nth($color, $index)

透過 nth(變數, 索引) 你能夠取得 List 裡的資料。上述範例編譯後的結果則會是這樣。

p {  
    color: #FFF;
}
div {  
    color: #ABC;
}

要注意的是在 Sass 中,List 從 1 開始算起,而不是正常程式界的 0。

Map - 物件

Map 和 List 不ㄧ樣的地方在於你可以自訂每個資料的鍵名,也就是他們的名稱。

注意:下列範例是基於 Sass 而不是 Scss,所以 Map 不能換行

$linkColor: (default: rgb(20, 20, 20), hover: rgb(100, 100, 100), active: rgb(5, 5, 5))

// 然後像這樣使用 hover 的顏色。
a:hover  
    color: map-get($linkColor, hover)

// 或者傳入一個鍵名名稱變數。
$activeName: active

a:active  
    color: map-get($linkColor, $activeName)

另一點和 List 不ㄧ樣的是,Map 需要透過 map-get(變數, 鍵名) 取得資料。上述範例編譯結果是這樣。

a:hover {  
    color: rgb(100, 100, 100);
}
a:active {  
    color: rgb(5, 5, 5);
}