Sass Maps的函数

Posted 2020-08-04 悬崖上的公主

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

从 编译出来的 CSS 可以得知，如果 $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) 函数就可以改变这一状态。我们来看一个简单的示例。

@if map-has-key($social-colors,facebook){ .btn-facebook { color: map-get($social-colors,facebook); } } @else { @warn "No color found for faceboo in $social-colors map. Property ommitted." } 

编译出来：

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

上面看到的示例是 facebook 这个 key 已存在 $social-colors 这个 map 当中。所以能正常编译。如果你手误，将 facebook 输错了：

@if map-has-key($social-colors,faceboo){ .btn-facebook { color: map-get($social-colors,facebook); } } @else { @warn "No color found for faceboo in $social-colors map. Property ommitted." }

这个时候，你编译出来的 CSS 代码中，不会有新代码添加，但在命令终端可以看到提示信息：

WARNING: No color found for faceboo in $social-colors map. Property ommitted. on line 25 of test.scss 

是不是非常的友好。但总觉得这样写是傻傻的，总不可能每获取一个 key 都写一个 @if 语句吧。其实不用这么复杂，我们可以自定义一个函数，比如 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 

那是在 $social-colors 这个 map 中没有 weibo 这个 key。是不是很有意思。

当然，如果你对 Sass 的指令熟悉的话，上面编译出来的 CSS 可以使用 @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"; 

这个时候，就可以配合 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; }

 

 

 

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)

map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。如果你要快速将新的值插入到 $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 中的：

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

执行：

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

得到的新 map:

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

 

 

 

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)

 

 

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)