辨析Sass中的Map和List-守望者-AIR技术交流

破晓发表于 2016-8-18 16:34:04

辨析Sass中的Map和List

来源：http://www.w3cplus.com/preprocessor/sass-maps-vs-nested-lists.html<div> </div><div>如果你使用过 Sass 3.3 之前的版本，那么你一定对那段时光颇有感触，那时候没有现如今这么好的条件，那时候的 <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">Map</a> 还只能用多重<a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#lists" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">列表</a>（lists of list）来模拟。多重列表可以实现复杂数据的嵌套定义，但却不是以键值对的形式实现的，所有当我们需要获取其中特定的某一项时就会比较麻烦。Map 这种数据类型天生就是基于键值对的形式，非常便于组织数据。自从可以使用 Map 之后，开发者们开始毫无顾忌地定义 Map 存储数据，比如<a href="http://www.sitepoint.com/css/sass-maps-breakpoint-mixin/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">断点宽度</a>、<a href="http://www.sitepoint.com/managing-color-values-with-sass/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">颜色值</a>、<a href="http://www.sitepoint.com/css/sass/breaking-free-bootstrap/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">栅格布局</a>等等<a href="http://www.sitepoint.com/sass-responsive-typography/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">响应式排版</a>的细节，都被一股脑的塞进了 Map 中。那么，有了 Map 之后，我们还有必要使用 List 吗？可能某些人会觉得为了保持向后兼容应该继续使用多重列表模拟 Map，因为可能有些开发者仍然在使用老版本的 Sass 编译器，但实际上，这是多此一举了，Sass 的版本通常由 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">package.json</code> 或者其他同类型的项目配置文件所控制，往往只需一条命令（<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">gem update sass</code>）即可更新 Sass 的版本，因此基本上无需考虑对老版本的兼容问题。使用多重列表替代 Map 的优势之一就是减少代码量。下面让我们来比较一下多种列表和 Map 的语法结构以及遍历方式。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">语法比较</h2>在下面的示例中，我创建了一个用于控制响应式布局的数据，该数据一共有四个断点，每一个断点都包含了 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">min-width</code>、<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">max-width</code>、<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">font-size</code> 和 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">line-height</code> 四个样式。<h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">Map 语法</h3>下面就是使用 Map 存储的数据，具体来说，该 Map 中首先存储了四个用于标识断点的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">Key</code>，相对应的是保存具体属性值得<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">Value</code>。虽然这种形式可读性更高，但是总体代码量却高达 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">26</code> 行 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">450</code> 个字符。<pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="cs" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$breakpoint-map: (
small: (
 min-width: null,
 max-width: 479px,
 base-font: 16px,
 vertical-rhythm: 1.3
),
medium: (
 min-width: 480px,
 max-width: 959px,
 base-font: 18px,
 vertical-rhythm: 1.414
),
large: (
 min-width: 960px,
 max-width: 1099px,
 base-font: 18px,
 vertical-rhythm: 1.5
),
xlarge: (
 min-width: 1100px,
 max-width: null,
 base-font: 21px,
 vertical-rhythm: 1.618
)
);
</code></pre><h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">多重列表语法</h3>下面的多重列表存储了和上面 Map 同样的数据，在多重列表中没有 Key-Value 的对应关系，这意味着要想找到特定的值，必须使用遍历或 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">nth()</code> 的<a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#nth-instance_method" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">方式</a>来实现了。从另一个角度来看，多种列表又比 Map 的代码量小得多，总共只有六行 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">180</code> 个字符。<pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="php" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$breakpoint-list: (
(small, null, 479px, 16px, 1.3),
(medium, 480px, 959px, 18px, 1.414),
(large, 960px, 1099px, 18px, 1.5),
(xlarge, 1100px, null, 21px, 1.618)
);
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">遍历比较</h2>从上面简单地比较中可以粗略的看出，多种列表的代码量明显少于 Map。但是，如果我们需要遍历这些值得话，复杂度又是怎样的呢？<h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">遍历 Map</h3>我们可以使用如下的代码遍历 Map：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@each $label, $map in $breakpoint-map {}
</code></pre>这里的变量 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$label</code> 和 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$map</code> 会随着对 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$breakpoint-map</code> 的遍历被动态地赋值，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$label</code> 将会被赋值为 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$breakpoint-map</code> 的 Key，而 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$map</code> 会被赋值为 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$breakpoint-map</code> 的 Value。为了在遍历过程中获取特定值，我们就需要使用 Sass 原生的<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code> 函数，使用该函数需要传入两个参数：Map 的名字和求取的 Key，最后返回该 Map 中匹配该 Key 的 Value。具体的做法就是使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@each</code> 遍历 Map，然后使用 <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;"><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code></a> 获取特定值，最终只需要六行代码 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">220</code> 个字符即可完成整个遍历：<pre class="perl" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="perl" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@each $label, $map in $breakpoint-map {
$min-width: map-get($map, min-width);
$max-width: map-get($map, max-width);
$base-font: map-get($map, base-font);
$vertical-rhythm: map-get($map, vertical-rhythm);
}
</code></pre><h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">遍历多重列表</h3>遍历多重列表不必像遍历 Map 一样动态获取到 Map 后再使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code> 函数取特定值，直接遍历一遍即可获得特定值。因为多种列表内层的每一个列表结构相同，都有按照相同顺序排列的五个值，所以我们可以持续遍历每个值并赋值给特定的变量。无需调用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code>，直接引用这些变量即可进行赋值等裸机操作。最终遍历多重列表只使用了两行代码 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">100</code> 个字符：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
}
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">慎用多重列表</h2>经过上述的比对，看起来多重列表各方面都在碾压 Map，实则不然，Sass 中添加 Map 有一条非常重要的原因就是：Key-Value 的映射关系。<h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">遗漏键值</h3>如果要使用多重列表，那么就必须保证自己非常熟悉多重列表内部的每一项所代表的意义。下面我们举个例子，来看看遗漏了某些值的情况：<pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="php" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$breakpoint-list: (
(small, null, 479px, 16px, 1.3),
(medium, 480px, 959px, 18px, 1.414),
(large, 960px, 1099px, 18px, 1.5),
(xlarge, 1100px, 21px, 1.618)
);

p {
@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
 @if $min-width {
 @include breakpoint( $min-width ) {
 font-size: $base-font;
 line-height: $vertical-rhythm;
 }
 } @else {
 font-size: $base-font;
 line-height: $vertical-rhythm;
 }
}
}
</code></pre>当我们尝试运行这段代码时，结果肯定是错误地，因为在 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$breakpoint-list</code> 的最后一行，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">xlarge</code> 被赋值给了<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$label</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">1100px</code> 被赋值给了 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$min-width</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">21px</code> 被赋值给了 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$max-width</code>, <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">1.618</code> 被赋值给了 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$base-font</code>，最终导致 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$vertical-rhythm</code> 没有被赋值，结果就是 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">font-size</code> 的属性值是错的，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">line-height</code> 的属性值是空的。此外，Sass 还不会对此抛出错误，导致我们无从知晓错误所在。如果我们使用 Map 来代替这里的多重列表，那么使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code> 函数即使遇见空值也能正确获得想要的结果。这就是值得我们慎重思考的地方：多种列表虽然简单快速，但是丧失了 Map 中的容错能力和快速取值能力。<h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">查找特定列表</h3>在多重列表中查找特定列表简直就是一种折磨。如果使用 Map，那么配合 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code> 函数可以快速定位到特定子 Map：<pre class="perl" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="perl" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$medium-map: map-get($maps, medium);
</code></pre>但如果要获取多种列表 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">medium</code> 列表，麻烦可就大了：<pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="php" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@function get-list($label) {
@each $list in $breakpoint-list {
 @if nth($list, 1) == $label {
 @return $list;
 }
}
@return null;
}
$medium-list: get-list(medium);
</code></pre>这段代码的逻辑就是遍历整个多重列表，知道找到第一个匹配项，然后返回，如果一直没有找到匹配项，就一直遍历到末尾，然后返回 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">null</code>。这实际上就是手工实现了 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code> 的逻辑。<h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">缺少原生的 Map 函数</h3>Sass 提供了诸多的原生函数用于处理 Map 数据类型，但是多重列表是没法调用这些函数的，比如，使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-merge()</code> 可以合并两个 Map，如果两个 Map 有相同的值，则取第二个 Map 的值为最终值。当然你也可以在多重列表中使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">join()</code> 或<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">append()</code> 来增加新列表，从而模拟出 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-merge()</code> 的效果。另一个实用的 Map 函数就是 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-has-key()</code>，对于依赖 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-get()</code> 的自定义函数来说，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map-has-key()</code> 可以用来验证特定的 Key 是否存在。但在列表中是完全没有相似的方法。你可以使用<a href="https://github.com/at-import/SassyLists" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">SassLists</a>。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">总结</h2>相比起列表来说，Key-Value 模型的 Map 显然更有力量，原生的 Sass Map 函数更是提供了强力的数据查找和验证工具。虽然多重列表代码量少，但并不能像 Map 一样进行错误检查或验证参数。在大多数时候，相比较多重列表而言，我相信 Map 是更好的选择。如果是为了更少的代码量和其他简单地调用，那么我偶尔会用用多重列表，但是从项目的宏观控制和数据存储方面显然更优秀。<div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe src="http://embed.sassmeister.com/gist/598bce41ebe7305cfacd" class="sassmeister-gist" id="sm-gist-598bce41ebe7305cfacd" scrolling="no" frameborder="0" allowtransparency="true" height="380" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><blockquote style="box-sizing: inherit; padding: 15px 20px; margin-bottom: 25px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(0, 163, 207); color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; background: rgb(246, 246, 246);">本文根据<a href="http://www.sitepoint.com/author/jsteinbach/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">@James Steinbach</a>的《<a href="http://www.sitepoint.com/sass-maps-vs-nested-lists/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">Sass Maps vs. Nested Lists</a>》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：<a href="http://www.sitepoint.com/sass-maps-vs-nested-lists/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">http://www.sitepoint.com/sass-maps-vs-nested-lists/</a>。</blockquote></div>

页: [1]

守望者--AIR技术交流's Archiver

辨析Sass中的Map和List