探索Sass3.3中的Maps(一)

本文作者：IMWeb 刘起 原文出处：IMWeb社区 未经同意，禁止转载

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

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

如需转载烦请注明出处： 探索Sass3.3中的Maps(一)