Sass Maps的函數-map-keys($map)

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

map-keys($social-colors);

其返回的值為：

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

換句話說：

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

相當於：

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

這個時候，就可以配合Sass 的list 做很多事情。

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

@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 這個map 的所有key 取出，並賦予給一個名為$names 的列表。然後通過index($names,$color) 返回$color 在$names 位置，如果這個位置不存在，將返回提示信息，如果存在將返回正確的值。

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

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

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