Sass Maps的函数-map-remove($map,$key)、keywords($args)

map-remove($map,$key)

map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map，仅能通过删除 map 中的某个 key 得到新 map。如：

$map:map-remove($social-colors,dribble);

返回的是一个新 map:

$map:(
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

如果删除的 key 并不存在于 $map 中，那么 map-remove() 函数返回的新 map 和以前的 map 一样。

$map:map-remove($social-colors,weibo);

返回的值：

$map: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
keywords($args)

keywords($args)

keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。

@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);

在命令终端可以看到一个输入的 @debug 信息：

 DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

批量的给小图标改颜色（多皮肤设置也可以）

 1 @mixin bgColors($args...){//表示传入多个参数，用了“...”符号
 2 
 3 　　$list: keywords($args);
 4 
 5 　　@each $x,$y in $list{//用一个each，循环变量colors列表里的键值对
 6 
 7 　　　　.bg_#{$x}{
 8 
 9 　　　　　　background-color：#{$y};
10 　　　　}
11 　　}
12 
13 }
14 
15 @include bgColors(//调用函数，并传入需要设置值得参数
16 
17 　　$weibo: #f00,
18 
19 　　$QQ : #0f0,
20 
21 　　$weixin: #00f,
22 
23 　　$github: #000
24 
25 )

编译后：

 1 .bg_weibo {
 2 
 3   background-color: #f00; }
 4 
 5 .bg_QQ {
 6 
 7   background-color: #0f0; }
 8 
 9 .bg_weixin {
10 
11   background-color: #00f; }
12 
13 .bg_github {
14 
15   background-color: #000; }

Sass Maps的函数-map-remove($map,$key)、keywords($args)

猜你喜欢