探索 Sass 3.3 中的 Maps

Question

Sass 的数据类型可以说是一个大家庭了，其数据类型中的数字、字符串、列表、颜色和布尔型，涵盖了大多数我们的需求。但是，正如一个框架开始的演变，在这个数据类型中还缺少一个关键性的工具：关联数组。

这里创建了一个变量 $objects，并且给他赋了一个列表值。

$objects: (carrot, salt, chicken);

列表可以同时定义多个数据，但他不像数组一样有对应的 key，没办法来分配上下文，也没有指数来索引这些数据。所以让我们看看如何创建一个关联数组，Sass 中称之为 Maps。

这里有三个相同的值，对应添加了一个 key，并且赋值给变量 $objects。

$objects: (vegetable: carrot, mineral: salt, animal: chicken);

正如你所看到的，这个和列表长得非常的相似。你甚至可以在其上面执行列表相关的功能。这里变量 $objects 保存了三个值，每个值有一个对应的key。如果我们想要索引出salt值，我们并不需要知道他在哪个位置，我们只需要在传递其对应的 key 给 map 就行。

$just-a-pinch-of: map-get($objects, mineral); // $just-a-pinch-of == salt

为什么这是一种新的数据类型，他的存在真的有意义吗？我们来看一个示例。

管理变量

你应该很多次看到这样定义变量的方式：

$primary-nav-top-padding: .2em;
$primary-nav-top-margin: .2em;
$primary-nav-line-height: 1.3;
$secondary-nav-background: white;
$secondary-nav-color: black;

Maps允许我们这样覆盖list：

$primary-nav: (
  padding-top: .2em,
  margin-top: .2em,
  line-height: 1.3,
);

$secondary-nav: (
  background: white,
  color: black,
);

这是为每个变量创建一个简单的嵌套，这也可能使他们做为一组。

// Sass
@mixin print-styles($map){
 @each $property, $value in $map {
   #{$property}: $value;
 }
}

.primary-nav {
 @include print-styles($primary-nav);
}

// Outputted CSS
.primary-nav {
  padding-top: .2em;
  margin-top: .2em;
  line-height: 1.3;
}

进一步了解Maps

需要更多的变量吗？Maps可以保存任何数据类型，包括其他的Maps。

// Sass
$primary-nav: (
  padding-top: .2em,
  margin-top: .2em,
  line-height: 1.3,
  nav-item: (
    color: white;
    is-expanded: (
      padding-top: 1em,
      margin-top: 1em
    )
  )
);

@mixin print-styles($map, $keys...){
 $i: 1;
 $length: length($keys);
 @while $length >= $i  {
   $map: map-get($map, nth($keys, $i));
   $i: $i + 1;
 }

 @each $property, $value in $map {
   @if type-of($value) != map {
     #{$property}: $value;
   }
 }
}

nav.expanded {
 @include print-styles($primary-nav, nav-item, is-expanded);
}

print-styles 的 @mixin 嵌套了一个Maps，并且向下遍历其每一个子Maps，直到使用完 $keys。在这上面，他可以遍历每一个属性，并一个一个打印出来。

// Outputted CSS
nav.expanded {
  padding-top: 1em,
  margin-top: 1em,
}

每个单独的变量都可以是一个主导航或子导航的变异，而不要使用 $main-navigation-nav-item-is-expanded-is-hovered-margin-top-on-the-blog-page。

在将来的一周，我们将看一个Maps的用例，使用 map-get 功能，从变量中调用变量。在此我们可以看看 Brad Wade 发表的文章《how the Department of Energy embraced Sass for their mobile strategy redesign》。