Sass中的Map长什么样
Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似。
json:
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }
Sass中的map
$map: ( key1: value1, key2: ( key-1: value-1, key-2: value-2, ), key3: value3 );
如何定义map
首先有一个类似于 Sass 的变量一样,用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号。
其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。
Sass Maps的函数
在 Sass 中 map 自身带了七个函数:
- 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。
Sass Maps的函数
1、map-get($map,$key)
map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中,将返回 null 值。此函数包括两个参数:
- $map:定义好的 map。
- $key:需要遍历的 key。
//SCSS $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); .btn-dribble{ color: map-get($social-colors,facebook); } //编译后的css .btn-dribble {color: #3b5998; }
2、map-has-key($map,$key) 函数
map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key,则函数返回 true,否则返回 false。
@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." }
但总觉得这样写是傻傻的,总不可能每获取一个 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); }
当然,如果你对 Sass 的指令熟悉的话,可以使用 @each:
$social-network:dribble,facebook,github,google,twtter,weibo;
@each $social-network,$social-color in $social-colors { .btn-#{$social-network} { color: colors($social-network); } }
3、map-keys($map)
map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量,那他就是一个列表。如:
map-keys($social-colors);
其返回的值为:
"dribble","facebook","github","google","twitter"
换句话说:
$list: map-keys($social-colors);
相当于:
$list:"dribble","facebook","github","google","twitter";
这个时候,就可以配合 Sass 的 list 做很多事情。
上面的示例,可以做通过 map-keys($map) 来做一个修改:
@function colors($color){ $names: map-keys($social-colors); @if not index($names,$color){ @warn "Waring: `#{$color} is not a valid color name.`"; } @return map-get($social-colors,$color); }
上面代码中最不同之处,我们使 用map-key s将 $social-colors 这个 map 的所有 key 取出,并赋予给一个名 为 $names 的列表。然后通过 index($names,$color) 返回 $color 在 $names 位置,如果这个位置不存在,将返回提示信息,如果存在将返回正确的值。
同样,也可以通过 @each 或者 @for 遍历出所有值:
// @each @each $name in map-keys($social-colors){ .btn-#{$name}{ color: colors($name); } } //@for @for $i from 1 through length(map-keys($social-colors)){ .btn-#{nth(map-keys($social-colors),$i)} { color: colors(nth(map-keys($social-colors),$i)); } }
虽然使用的方法不一样,但最终得到的 CSS 是一样的
4、map-values($map)
map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value 值,可以说也将是一个列表。而且,map-values($map) 中如果有相同的 value 也将会全部获取出来。
如前面的示例,使用:
map-values($social-colors)
将会返回:
#ea4c89,#3b5998,#171515,#db4437,#55acee
值与值之前同样用逗号分隔。
5、map-merge($map1,$map2)
map-merge($map1,$map2)
map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并,然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话,这种方法是最佳方法
如:
$color: ( text: #f36, link: #f63, border: #ddd, backround: #fff ); $typo:( font-size: 12px, line-height: 1.6 ); //如果希望将这两个 $map 合并成一个 map,我们只要这样做: $newmap: map-merge($color,$typo); //将会生成一个新的 map: $newmap:( text: #f36, link: #f63, border: #ddd, background: #fff, font-size: 12px, line-height: 1.6 );
这样你就可以借助 map-get( ) 等函数做其他事情了。
不过有一点需要注意,如果 $map1 和 $map2 中有相同的 $key 名,那么将 $map2 中的 $key 会取代 $map1 中的值
6、map-remove($map,$key)
map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map,仅能通过删除 map 中的某个 key 得到新 map。如:
$map:map-remove($social-colors,dribble);
返回的是一个新 map:
$map:( facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee );
如果删除的 key 并不存在于 $map 中,那么 map-remove() 函数返回的新 map 和以前的 map 一样。
7、keywords($args)
keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现,其中 $args 变成 key(会自动去掉$符号),而 $args 对应的值就是value。
@mixin map($args...){ @debug keywords($args); } @include map( $dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee );
在命令终端可以看到一个输入的 @debug 信息:
DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)