Maps

從 Sass3.3 開(kāi)始，樣式表作者可以使用 map 這種數(shù)據(jù)結(jié)構(gòu)—— Sass 團(tuán)隊(duì)使 map 可以映射關(guān)聯(lián)數(shù)組、哈希表甚至是 Javascript 對(duì)象。map 是一種映射任何類型鍵值對(duì)（可以是任何類型，包括內(nèi)嵌 maps，不過(guò)不推薦這種內(nèi)嵌方式）的數(shù)據(jù)結(jié)構(gòu)。

map 的使用應(yīng)該遵循下述規(guī)范：

• 冒號(hào)(:)之后添加空格；
• 左開(kāi)括號(hào)(()要和冒號(hào) (:)寫(xiě)在同一行；
• 如果鍵是字符串（99% 都是字符串），則使用引號(hào)包裹起來(lái)。
• 每一個(gè)鍵值對(duì)單獨(dú)一行；
• 每一個(gè)鍵值對(duì)以逗號(hào)(,)結(jié)尾；
• 為最后一個(gè)鍵值對(duì)添加尾部逗號(hào)?(,)，方便添加新鍵值對(duì)、刪除和重排已有鍵值對(duì)；
• 單獨(dú)一行書(shū)寫(xiě)右閉括號(hào) ())；
• 右閉括號(hào) ())和分號(hào)(;)之間不使用空格和換行。

示例:

// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );

調(diào)試 SASS MAP

如果你感到困惑并想了解 Sass 的 map 到底有怎樣的魔力，請(qǐng)不要擔(dān)心，Sass 中始終存在一個(gè)自動(dòng)保存運(yùn)行過(guò)程的機(jī)制。

@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 的實(shí)現(xiàn)機(jī)制，可以添加下述函數(shù)。該混合宏可以自動(dòng)顯示 map 的運(yùn)行機(jī)制。

/// 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;
}

擴(kuò)展閱讀

• Using Sass Maps
• Debugging Sass Maps
• Extra Map functions in Sass
• Real Sass, Real Maps
• Sass Maps are Awesome
• Sass list-maps
• Sass Maps Plus
• Sassy-Maps
• Introduction to Sass Maps Usage and Examples