map-has-key($map,$key) 函數(shù)將返回一個布爾值。當 $map 中有這個 $key，則函數(shù)返回 true，否則返回 false。

前面的示例，當 $key 不在 $map 中時，使用 map-get($map,$key) 函數(shù)將返回一個 null 值。但對于開發(fā)人員，并看不到任何提示信息。如果使用 map-has-key($map,$key) 函數(shù)就可以改變這一狀態(tài)。我們來看一個簡單的示例。

@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 這個 key 已存在 $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

是不是非常的友好。但總覺得這樣寫是傻傻的，總不可能每獲取一個 key 都寫一個 @if 語句吧。其實不用這么復雜，我們可以自定義一個函數(shù)，比如 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);
}

有了這個函數(shù)之后，我們就可以這樣使用

.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;
}

同時你不難發(fā)現(xiàn)，命令終端提示信息：

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

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

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

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