Sassmap详解

作为一个CSS预处理器，Sass正受到越来越多的青睐，诸如Github、Codepen、CSS-Tricks、SitePoint、w3cplus等网站采用Sass组织、管理CSS文件，Sass正在逐渐成为事实上的CSS预处理器 行业标准 。接下来几篇文章，我们来研读下Sass中的关键功能，今天来看map，大家不妨一坐，精彩内容马上呈现。

map简介

在Sass中，maps代表一种 数据类型 ，可以包含若干键值对的对象类型，使用()包围一个map，里面的键值对用逗号隔开，键和值可以是任何的Sass数据类型，尽管一个值可以用在多个键上，但是通过一个键我们必须只能找到一个值。map不能直接在css中使用，如果你把一个map赋值给一个元素将会报错。下面的代码示例一个经典的map。

 $map: (
   key1:  value1,
   key2:  value2,
   key3:  value3
);  

map使用

我们可以使用一系列的函数 操作 map，可以使用循环指令 遍历 map。
map相关的函数有map-keys()、map-values()、map-get()、map-has-key()、map-merge()、map-remove()、keywords()等，函数功能如下表所示。

函数 功能 示例 map-keys(map) 返回map里面所有的key(list) map-keys(("foo": 1, "bar": 2)) => "foo", "bar" map-values(map) 返回map里面所有的value(list) map-values(("foo": 1, "bar": 2)) => 1, 2 map-get(map,key) 返回map里面指定可以的value map-get(("foo": 1, "bar": 2), "foo") => 1 map-has-key(map,key) 返回map里面是否含有指定的key map-has-key(("foo": 1, "bar": 2), "foo") => true map-merge(map1,map2) 合并map(map) map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2) map-remove(map,keys) 删除指定map中的指定key(map) map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1) keywords(args) 返回一个函数参数组成的map(map) @mixin foo(args...){@debug keywords($args); //=> (arg1: val, arg2: val)}

我们可以使用@each指令遍历map，如下所示。

 $map :  (
   key1:  value1,
   key2:  value2,
   key3:  value3
);
 /* 遍历map */ 
@each $key, $value  in  $map {
  .element-- #{$key} { 
     background:  $value;
  }
}  

map案例

map在Sass中应用广泛，有很多场合可以用到map，下面列举一二。

指定多值

css里有很多属性可以指定多个值，例如transition、box-shadow等，这个时候我们可以使用map来定义不同的值，然后可以统一使用。例如

  /* 使用map定义不同的值 */ 
$card_transition_map: (
   trans1:   200 ms transform ease-in-out,
   trans2:   400 ms background ease-in,
   trans3:   600 ms color linear
);
 /* map-values统一使用 */ 
. card  {
   transition:  map-values($card_transition_map);
}  

编译之后 输出

   .card    { 
      transition :    200ms   transform ease-in-out, 
                  400ms    background  ease-in, 
                  600ms   color linear ; 
 }   

查看更多关于Sassmap详解的详细内容...