map-get($map,$key) 函數的作用是根據 $key 參數，返回 $key 在 $map 中對應的 value 值。如果 $key 不存在 $map中，將返回 null 值。此函數包括兩個參數：

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

來看一個簡單的示例，假設定義了一個 $social-colors 的 map:

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

假設要獲取 facebook 鍵值對應的值 #3b5998，我們就可以使用 map-get() 函數來實現：

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

編譯出來的CSS：

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

我們來看另一種情況，假設 $social-colors 這個 map 沒有 $weibo 這個 key:

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

此時編譯出來的是CSS：

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

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