正在產生人工智慧內容摘要...
Sass Maps 是 Sass 3.3 版的新東西，我們可以利用它更有效的管理我們的變數；如果再搭配 if/else 條件式或 each 迴圈，可以寫出更簡單(也更程式導向) 的 CSS 語法。
雖然 Maps 有地圖或索引的意思，但你不妨把它想成是 JavaScript 的物件，這樣在觀念與使用上會比較接得起來 😊 ～
以往我們用 Sass 設定變數時，會用各種單字取名。通常會用這種比較沒有系統的寫法：
$font-color: #424242; $base-color: #ff6599; $background-color: #ebe4e8; $light-grey: #efefef;
以上這些變數單拆開來，可能都看得懂。但真的要使用時，通常都要回頭翻閱；另外一個問題就是變數愈多管理愈不易。
所以我們可以利用 SASS Maps 幫我們解決這樣的問題。
Sass Maps 基本介紹
Sass Maps 的格式如下(Sass Maps 官方文件參考)
$map: ( key1: value1, key2: value2, key3: value3 );
將剛剛那些變數按照 Sass Maps 格式整理一番，可以比較有系統化
$colors: (
lt-grey: #efefef,
grey: #424242,
pink: #ff6599,
);
$backgrounds: (
lt-grey: #ebe4e8
);
/* How to use */
body {
background: map-get($backgrounds, lt-grey);
color: map-get($colors, pink);
}將上面的變數根據種類 / 屬性的不同，可以變成像物件一樣，需要哪一個資料再把它取出來即可。
利用 functions 包裝 Sass Maps
Sass Maps 看起來非常簡單也好上手，對吧！
不過每次都要寫 map-get 是不是覺得有點阿雜？如果不常用可能會忘記這段語法，又要回頭找資料。
會使用 Sass 的人，從本質上就是個懶鬼無誤，所以可以少寫幾個字，我們就要努力少寫幾個字💪，所以我們來利用 functions 幫我們包裝一下這段程式碼吧！
@function color($color-name) {
@return map-get($colors, $color-name);
}
@function background($background-name) {
@return map-get($backgrounds, $background-name);
}
body {
background: background(lt-grey);
color: color(pink);
}
大家可以用 codepen 玩玩看
用迴圈跑 Sass Maps
除了 functions 之外，我們也可以用迴圈跑一段 Sass Maps 唷。
假設今天要做一個選單組合，而每個選單的背景顏色都不一樣，我們可以先用 Sass Maps 定義好每個選單的顏色：
$menus: (
menu1: #94a437,
menu2: #cb0a3a,
menu3: #5d5d5d,
menu4: #0095a1,
menu5: #5273d1
);
.menu a {
color: #fff;
}接下來用迴圈跑出 menu1 到 menu5 的顏色以及 :hover
@each $menu-item, $menu-color in $menus {
.#{$menu-item} {
background: $menu-color;
}
.#{$menu-item}:hover {
background: lighten($menu-color, 15%);
}
}最後編譯出來的 CSS 如下：
.menu1 { background: #94a437; }
.menu1:hover { background: #b9c95e; }
.menu2 { background: #cb0a3a; }
.menu2:hover { background: #f52d5f; }
.menu3 { background: #5d5d5d; }
.menu3:hover { background: #838383; }
.menu4 { background: #0095a1; }
.menu4:hover { background: #00dced; }
.menu5 { background: #5273d1; }
.menu5:hover { background: #8ea4e1; }有感受到，多寫一點迴圈可以省很多事情的 FU 嗎 😊
我能使用 Sass Maps 嗎
文章最前面有提到，Sass Maps 是 Sass 3.3 版的新東西，因此只要你的 Sass 高於 3.3 版都可以使用喔！
簡單檢測方法，直接在 terminal 輸入 sass -v 就可以知道目前的 Sass 版本囉。
參考資料： Sass Maps - Jonathan Su