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); } }
原文地址:https://www.cnblogs.com/qjuly/p/9118475.html
时间: 2024-11-01 20:30:22