從 Sass3.3 開始，樣式表作者可以使用 map 這種數據結構—— Sass 團隊使 map 可以映射關聯數組、哈希表甚至是 Javascript 對象。map 是一種映射任何類型鍵值對（可以是任何類型，包括內嵌 maps，不過不推薦這種內嵌方式）的數據結構。 map 的使用應該遵循下述規范： * 冒號(`:`)之后添加空格； * 左開括號(`(`)要和冒號 (`:`)寫在同一行； * 如果鍵是字符串（99% 都是字符串），則**使用引號包裹起來**。 * 每一個鍵值對單獨一行； * 每一個鍵值對以逗號(`,`)結尾； * 為最后一個鍵值對添加**尾部逗號**?(`,`)，方便添加新鍵值對、刪除和重排已有鍵值對； * 單獨一行書寫右閉括號 (`)`)； * 右閉括號 (`)`)和分號(`;`)之間不使用空格和換行。 示例: ~~~ // Yep $breakpoints: ( 'small': 767px, 'medium': 992px, 'large': 1200px, ); // Nope $breakpoints: ( small: 767px, medium: 992px, large: 1200px ); ~~~ ## 調試 SASS MAP 如果你感到困惑并想了解 Sass 的 map 到底有怎樣的魔力，請不要擔心，Sass 中始終存在一個自動保存運行過程的機制。 ~~~ @mixin debug-map($map) { @at-root { @debug-map { __toString__: inspect($map); __length__: length($map); __depth__: if(function-exists('map-depth'), map-depth($map), null); __keys__: map-keys($map); __properties__ { @each $key, $value in $map { #{'(' + type-of($value) + ') ' + $key}: inspect($value); } } } } } ~~~ 如果你想深入了解 map 的實現機制，可以添加下述函數。該混合宏可以自動顯示 map 的運行機制。 ~~~ /// Compute the maximum depth of a map /// @param {Map} $map /// @return {Number} max depth of `$map` @function map-depth($map) { $level: 1; @each $key, $value in $map { @if type-of($value) == 'map' { $level: max(map-depth($value) + 1, $level); } } @return $level; } ~~~ ## 擴展閱讀 * [Using Sass Maps](http://www.sitepoint.com/using-sass-maps/) * [Debugging Sass Maps](http://www.sitepoint.com/debugging-sass-maps/) * [Extra Map functions in Sass](http://www.sitepoint.com/extra-map-functions-sass/) * [Real Sass, Real Maps](http://blog.grayghostvisuals.com/sass/real-sass-real-maps/) * [Sass Maps are Awesome](http://viget.com/extend/sass-maps-are-awesome) * [Sass list-maps](https://github.com/lunelson/sass-list-maps) * [Sass Maps Plus](https://github.com/lunelson/sass-maps-plus) * [Sassy-Maps](https://github.com/at-import/sassy-maps) * [Introduction to Sass Maps Usage and Examples](http://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184)