徵求意見稿：巢狀 Map 函式

隨著 Sass 函式庫和設計系統變得越來越複雜，並且有更多具有不同需求的使用者，它們往往需要共享和覆蓋配置和設計 token。這種配置通常是階層式的，最終會被表示為包含 map 的 map，而這些 map 又包含更多的 map。到目前為止，Sass 的 map 函式還不容易處理這種巢狀 map 結構。但隨著 Sass 核心團隊成員 Miriam Suzanne 撰寫的最新語言提案，情況正在發生變化。

此提案擴展了現有的 map 函式，並添加了一些新函式，使處理巢狀 map 比以前容易得多。它基於網路上各種 Sass 專案中出現的輔助函式，將最佳實務整合回語言本身。

函式函式永久連結

以下是此提案新增的及改進的函式

map.get() 和 map.has-key()map.get() 和 map.has-key() 永久連結

map.get() 和 map.has-key() 函式現在都可以接受任意數量的鍵作為參數。每個鍵都會深入到巢狀 map 中，讓您可以輕鬆檢查巢狀值，而無需將一堆函式呼叫串在一起。

例如，讓我們以下列簡化的配置 map 為例

$config: (
  "colors": (
    "primary": red,
    "secondary": blue
  )
)

對於此 map，map.get($config, "colors", "primary") 會取得 "colors" 鍵的值 (("primary": red))，然後取得 "primary" 鍵的值，並返回 red。

同樣地，map.has-key($config, "colors", "primary") 會返回 true，而 map.has-key($config, "colors", "tertiary") 會返回 false。

map.merge()map.merge() 永久連結

map.merge() 函式現在可以作為 map.merge($map1, $keys..., $map2) 呼叫。這會將 $map2 與 $map1 位於鍵所指定位置的子項合併，並同時更新父 map。

例如，使用上面定義的配置 map，map.merge($config, "colors", ("primary": green)) 將返回

(
  "colors": (
    "primary": green,
    "secondary": blue
  )
)

map.set()map.set() 永久連結

map.set($map, $keys..., $value) 函式是全新的。雖然使用 map.merge() 更新 map 中的個別值一直是可行的，但我們發現使用者會對缺少專用的 set() 函式感到困惑。此函式不僅填補了這個角色，還可以在巢狀 map 中設定值。

您可以透過只傳遞一個鍵，將 map.set() 用於普通的單層 map。例如，map.set(("wide": 200px, "narrow": 70px), "wide", 180px) 將返回 ("wide": 180px, "narrow": 70px)。

但您也可以將其用於巢狀 map。例如，map.set($config, "colors", "tertiary", yellow) 將返回

(
  "colors": (
    "primary": red,
    "secondary": blue,
    "tertiary": yellow
  )
)

map.deep-remove()map.deep-remove() 永久連結

由於現有的 map.remove() 函式已經可以接受任意數量的參數，我們無法直接更新它來處理巢狀映射。因此，我們選擇新增一個專門用於巢狀映射的新函式，稱為 map.deep-remove($map, $keys...)。這個函式會移除列表中最後一個鍵的值，並相應地更新所有父層映射。

例如，map.deep-remove($config, "colors", "secondary") 會回傳 ("colors": ("primary": red))。

map.deep-merge()map.deep-merge() 永久連結

最後一個新函式可能是最令人興奮的。map.deep-merge($map1, $map2) 的運作方式與 map.merge() 相同，不同之處在於任何巢狀映射也會被合併，包括這些映射中的映射，依此類推。這使得合併兩個具有相同結構的設定映射變得容易，而無需手動合併每一層。

例如，map.deep-merge($config, ("colors": ("secondary": teal))) 會回傳

(
  "colors": (
    "primary": red,
    "secondary": teal
  )
)

讓我們知道您的想法！讓我們知道您的想法！永久連結

如果您有興趣進一步了解此提案，請在 GitHub 上完整閱讀。它將在接下來的一個月內開放評論和修訂，因此如果您希望看到一些更改，請提交 issue，我們可以討論。