Sass函数--map

Map
Sass 的 map 常常被称为数据地图，也有人称其为数组，是以 key:value 成对的出现。

 $map: (
     $key1: value1,
     $key2: value2,
     $key3: value3
 )

首先有一个类似于 Sass 的变量一样，用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。
其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。

 $default-color: #fff !default;
 $primary-color: #22ae39 !default;

 $color: (
     default: #fff,
     primary: #22ae39
 );

你需要新增加颜色变量值，在 map 中可以非常随意的添加：

 $color: (
     default: #fff,
     primary: #22ae39,
     negative: #d9534f
 );

可以让 map 嵌套 map。里面可以继续放一对或者多对 key:value：

 $map: (
     key1: value1,
     key2: (
         key-1: value-1,
         key-2: value-2,
     ),
     key3: value3
 );

有碰到过换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。你可以这样使用：

 $theme-color: (
     default: (
         bgcolor: #fff,
         text-color: #444,
         link-color: #39f
     ),
     primary:(
         bgcolor: #000,
         text-color:#fff,
         link-color: #93f
     ),
     negative: (
         bgcolor: #f36,
         text-color: #fefefe,
         link-color: #d4e
     )
 );

Sass Maps的函数

前面介绍了使用 map 来管理变量，但要在 Sass 中获取变量，或者对 map 做更多有意义的操作，我们必须借助于 map 的函数功能。在 Sass 中 map 自身带了七个函数：

• map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
• map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
• map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
• map-keys($map)：返回 map 中所有的 key。
• map-values($map)：返回 map 中所有的 value。
• map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
• keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

Sass Maps的函数-map-get($map,$key)
map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。此函数包括两个参数：

$map：定义好的 map。
$key：需要遍历的 key。

假设定义了一个 $social-colors 的 map:

 $social-colors: (
     dribble: #ea4c89,
     facebook: #3b5998,
     github: #171515,
     google: #db4437,
     twitter: #55acee
 );

假设要获取 facebook 键值对应的值 #3b5998，可以使用 map-get() 函数来实现：

 .btn-dribble{
     color: map-get($social-colors,facebook);
 }

编译出来的CSS：

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

假设 $social-colors 这个 map 没有 $weibo 这个 key:

 .btn-weibo{
     font-size: 12px;
     color: map-get($social-colors,weibo);
 }

此时编译出来的是CSS：

 .btn-weibo {
     font-size: 12px;
 }

如果 $key 不在 $map 中，不会编译出 CSS，其实在 Sass 中，map-get($social- colors,weibo) 返回了一个 null 值。但在编译出来的 CSS 中，你只知道他没有编译出样式，而且在命令终端编译时，也没有任何错误或者警告信息。你并不知道他为什么编译不出来样式，或者说他已返回了值为 null。体验不强，也不好排错。如果我们自定义一个函数，另外加个判断，那就截然不同。

Sass Maps的函数-map-has-key($map,$key)
map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key，则函数返回 true，否则返回 false。
当 $key 不在 $map 中时，使用 map-get($map,$key) 函数将返回一个 null 值。但对于开发人员，并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。
自定义一个函数，比如 colors():

 @function colors($color){
     @if not map-has-key($social-colors,$color){
         @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
 }
     @return map-get($social-colors,$color);
 }
 .btn-dribble {
     color: colors(dribble);
 }
 .btn-facebook {
     color: colors(facebook);
 }
 .btn-github {
     color: colors(github);
 }
 .btn-google {
     color: colors(google);
 }
 .btn-twitter {
     color: colors(twitter);
 }
 .btn-weibo {
     color: colors(weibo);
 }

使用终端编译有报错提示。

编译出来的 CSS:

 .btn-dribble {
     color: #ea4c89;
 }

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

 .btn-github {
     color: #171515;
 }

 .btn-google {
     color: #db4437;
 }

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

同时命令终端提示信息：

WARNING: No color found for `weibo` in $social-colors map. Property omitted.
on line 13 of test.scss

可以使用 @each：

 @each $social-network,$social-color in $social-colors {
     .btn-#{$social-network} {
         color: colors($social-network);
     }
 }

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

例：

 @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-keys将 $social-colors 这个 map 的所有 key 取出，并赋予给一个名为 $names 的列表。然后通过 index($names,$color) 返回 $color 在 $names 位置，如果这个位置不存在，将返回提示信息，如果存在将返回正确的值。

也可以通过 @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));
     }
 }

Sass Maps的函数-map-values($map)、map-merge($map1,$map2)
map-values($map)
map-values($map) 函数类似于 map-keys($map) 功能，不同的是 map-values($map )获取的是 $map 的所有 value 值，可以说也将是一个列表。而且，map-values($map) 中如果有相同的 value 也将会全部获取出来。

 map-values($social-colors)
 //将会返回：
 #ea4c89,#3b5998,#171515,#db4437,#55acee

值与值之间同样用逗号分隔。
map-merge($map1,$map2)
map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法。

 $color: (
     text: #f36,
     link: #f63,
     border: #ddd,
     backround: #fff
 );
 $typo:(
     font-size: 12px,
     line-height: 1.6
 );

两个 $map 合并成一个 map：

$newmap: map-merge($color,$typo);

将会生成一个新的 map:

 $newmap:(
     text: #f36,
     link: #f63,
     border: #ddd,
     background: #fff,
     font-size: 12px,
     line-height: 1.6
 );

这样你就可以借助 map-get()等函数做其他事情了。
注意:如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的：

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

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)