Scss Maps的函数-map-keys($map)

css yekong 120℃

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

喜欢 (0)