探索Sass3.3中的Maps(一)

本文由大漠根据Micah Godbolt的《Exploring Maps In Sass 3.3 (Part 1)》一文所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.phase2technology.com/blog/exploring-maps-in-sass-3-3，以及作者相关信息。

——作者：Micah Godbolt

——译者：大漠

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》。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://www.phase2technology.com/blog/exploring-maps-in-sass-3-3/

中文译文：https://www.fedev.cn/preprocessor/exploring-maps-in-sass-3-3-part-1.html

Air Force 1 Foamposite