Sass Maps的函數-map-get($map,$key)

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。體驗不強，也不好排錯。其實如果我們自定義一個函數，另外加個判斷，那就截然不同。