Sass 的 map 常常被稱為數據地圖，也有人稱其為數組，因為他總是以 key:value 成對的出現，但其更像是一個 JSON 數據 ~~~ $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); ~~~ ~~~ //使用@each去遍歷 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); @each $k,$v in $social-colors { .btn-#{$k}{ color:$v; } } ~~~ ~~~ map-get //獲取map類型的值 ~~~ ~~~ $colors:( bg:#eee, text-color:#333, primary:#ff2d51 ); div{ color:map-get($map: $colors, $key: text-color) } ~~~ ~~~ //自定義函數 @function color($key) { @if map-has-key($colors, $key) { @return map-get($colors, $key); } @warn "Unknown `#{$key}` in $colors."; @return null; } ~~~ ~~~ div:{ background:color(bg) } ~~~ - 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。 ## 1.map-has-key >map-has-key($map,$key) 函數將返回一個布爾值。當 $map 中有這個 $key，則函數返回 true，否則返回 false。 ~~~ $colors: (bg: #ea4c89, text-color: #333, primary: #ff2d51); ~~~ ~~~ @if map-has-key($map: $colors, $key: bg){ div{ color:map-get($map: $colors, $key:text-color ) } } ~~~ ## 2.map-keys($map) >函數將會返回 $map 中的所有 key。這些值賦予給一個變量，那他就是一個列表 ~~~ $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); $list:map-keys($social-colors); @each $var in $list { .#{$var}{ width:100px; } } ~~~ ## 3.map-merge ~~~ $bg:( bg:red ); $color:( color:blue ); $bc:map-merge($bg,$color); div{ background:map-get($map: $bc, $key:bg ); color:map-get($map: $bc, $key:color ) } ~~~