探索Sass3.3中的Maps(一)

• 2019 年 12 月 4 日
• 筆記

本文作者：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(一)