Sass函數:Sass Maps的函數-map-has-key($map,$key)
阿新 • • 發佈:2018-05-31
color pan googl 語句 布爾值 意思 布爾 提示 ebo
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)