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 ) } ~~~