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