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 这个 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 语句吧。其实不用这么复杂，我们可以自定义一个函数，比如 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 这个 map 中没有 weibo 这个 key。是不是很有意思。

当然，如果你对 Sass 的指令熟悉的话，上面编译出来的 CSS 可以使用 @each：

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