标签：test 那是 自定义 UNC map for 定义 编译 获取
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函数：Sass Maps的函数-map-has-key($map,$key)
标签：test 那是 自定义 UNC map for 定义 编译 获取
原文地址：https://www.cnblogs.com/qjuly/p/9118475.html
