map-get($map,$key) 函數(shù)的作用是根據(jù) $key 參數(shù)，返回 $key 在 $map 中對(duì)應(yīng)的 value 值。如果 $key 不存在 $map中，將返回 null 值。此函數(shù)包括兩個(gè)參數(shù)：

• $map：定義好的 map。
• $key：需要遍歷的 key。

來(lái)看一個(gè)簡(jiǎn)單的示例，假設(shè)定義了一個(gè) $social-colors 的 map:

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

假設(shè)要獲取 facebook 鍵值對(duì)應(yīng)的值 #3b5998，我們就可以使用 map-get() 函數(shù)來(lái)實(shí)現(xiàn)：

.btn-dribble{
  color: map-get($social-colors,facebook);
}

編譯出來(lái)的CSS：

.btn-dribble {
  color: #3b5998;
}

我們來(lái)看另一種情況，假設(shè) $social-colors 這個(gè) map 沒(méi)有 $weibo 這個(gè) key:

.btn-weibo{
  font-size: 12px;
  color: map-get($social-colors,weibo);
}

此時(shí)編譯出來(lái)的是CSS：

.btn-weibo {
  font-size: 12px;
}

從 編譯出來(lái)的 CSS 可以得知，如果 $key 不在 $map 中，不會(huì)編譯出 CSS，其實(shí)在 Sass 中，map-get($social- colors,weibo) 返回了一個(gè) null 值。但在編譯出來(lái)的 CSS 中，你只知道他沒(méi)有編譯出樣式，而且在命令終端編譯時(shí)，也沒(méi)有任何錯(cuò)誤或者警告信息。說(shuō)實(shí)話，你并不知道他為什么編譯不出來(lái)樣式，或者說(shuō)他已返回了值為 null。體驗(yàn)不強(qiáng)，也不好排錯(cuò)。其實(shí)如果我們自定義一個(gè)函數(shù)，另外加個(gè)判斷，那就截然不同。