map-keys($map) 函數(shù)將會(huì)返回 $map 中的所有 key。這些值賦予給一個(gè)變量，那他就是一個(gè)列表。如：

map-keys($social-colors);

其返回的值為：

"dribble","facebook","github","google","twitter"

換句話說：

$list: map-keys($social-colors);

相當(dāng)于：

$list:"dribble","facebook","github","google","twitter";

這個(gè)時(shí)候，就可以配合 Sass 的 list 做很多事情。

上面的示例，可以做通過 map-keys($map) 來做一個(gè)修改：

@function colors($color){
    $names: map-keys($social-colors);
    @if not index($names,$color){
        @warn "Waring: `#{$color} is not a valid color name.`";
    }
    @return map-get($social-colors,$color);
}

上面代碼中最不同之處，我們使 用map-key s將 $social-colors 這個(gè) map 的所有 key 取出，并賦予給一個(gè)名 為 $names 的列表。然后通過 index($names,$color) 返回 $color 在 $names 位置，如果這個(gè)位置不存在，將返回提示信息，如果存在將返回正確的值。

.btn-weibo{
    color: colors(weibo);
}

例如，weibo 不在 $social-color s中，那么不會(huì)編譯出 CSS，而且在命令終端同樣會(huì)有提示信息：

WARNING: Waring: `weibo is not a valid color name.`
         on line 27 of test.scss

同樣，也可以通過 @each 或者 @for 遍歷出所有值：

@each:

@each $name in map-keys($social-colors){
    .btn-#{$name}{
        color: colors($name);
    }
}

@for:

@for $i from 1 through length(map-keys($social-colors)){
    .btn-#{nth(map-keys($social-colors),$i)} {
        color: colors(nth(map-keys($social-colors),$i));
    }
}

雖然使用的方法不一樣，但最終得到的 CSS 是一樣的：

.btn-dribble {
  color: #ea4c89;
}

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

.btn-github {
  color: #171515;
}

.btn-google {
  color: #db4437;
}

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