Sass Maps的函數-map-has-key（$ map，$ key）

map-has-key（$ map，$ key）函數將返回一個布爾值。當$ map中有這個$ key，則函數返回true，否則返回false。

前面的示例，當$ key不在$ map中時，使用map-get（$ map，$ key）函數將返回一個null值。但對於開發人員，並看不到任何提示信息。如果使用map-has- key（$ map，$ key）函數就可以改變這一狀態。我們來看一個簡單的示例。

@if map-has-key($social-colors,facebook){
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}

編譯出來：

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

上面看到的示例是facebook這個鍵已存在$ social-colors這個map當中。所以能正常編譯。如果你手誤，將facebook輸錯了：

@if map-has-key($social-colors,faceboo){
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}

這個時候，你編譯出來的CSS代碼中，不會有新代碼添加，但在命令終端可以看到提示信息：

WARNING: No color found for faceboo in $social-colors map. Property ommitted.
         on line 25 of test.scss

是不是非常的友好。但總覺得這樣寫是傻傻的，總不可能每獲取一個關鍵都寫一個@if語句吧。其實不用這麼複雜，我們可以自定義一個函數，比如colors（）：

@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);
}

有了這個函數之後，我們就可以這樣使用

.btn-dribble {
    color: colors(dribble);
}
.btn-facebook {
    color: colors(facebook);
}
.btn-github {
    color: colors(github);
}
.btn-google {
    color: colors(google);
}
.btn-twitter {
    color: colors(twitter);
}
.btn-weibo {
    color: colors(weibo);
}

編譯出來的CSS：

.btn-dribble {
  color: #ea4c89;
}

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

.btn-github {
  color: #171515;
}

.btn-google {
  color: #db4437;
}

.btn-twitter {
  color: #55acee;
}

同時你不難發現，命令終端提示信息：

WARNING: No color found for `weibo` in $social-colors map. Property omitted.
         on line 13 of test.scss

那是在$ social-colors這個地圖中沒有weibo這個key。是不是很有意思。

當然，如果你對Sass的指令熟悉的話，上面編譯出來的CSS可以使用@each：

@each $social-network,$social-color in $social-colors {
    .btn-#{$social-network} {
        color: colors($social-network);
    }
}