1. 程式人生 > >Sass函數:Sass Maps的函數-map-has-key($map,$key)

Sass函數:Sass Maps的函數-map-has-key($map,$key)

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)