核心要點(diǎn)

• Sass映射和嵌套列表都是Sass中的數(shù)據(jù)結(jié)構(gòu)，映射在Sass 3.3中引入。映射提供鍵值對(duì)，允許更復(fù)雜的數(shù)據(jù)存儲(chǔ)，而嵌套列表是更簡(jiǎn)單的結(jié)構(gòu)，可以保存復(fù)雜數(shù)據(jù)，但缺少鍵值配對(duì)。
• 盡管映射增加了復(fù)雜性，但由于它們能夠存儲(chǔ)各種數(shù)據(jù)（例如斷點(diǎn)寬度、顏色值、網(wǎng)格布局、類(lèi)型比例和其他響應(yīng)式排版細(xì)節(jié)），因此它們變得流行起來(lái)。另一方面，嵌套列表由于其簡(jiǎn)單性和較少的輸入而更實(shí)用。
• 使用Sass映射的主要優(yōu)點(diǎn)之一是能夠直接訪問(wèn)特定值，這使得代碼更有效率且更易于閱讀。但是，嵌套列表編寫(xiě)和維護(hù)起來(lái)可能更快，但它們?nèi)狈τ成涞腻e(cuò)誤檢查和詳細(xì)查詢功能。
• 雖然嵌套列表在輸入方面可能更高效，但它們需要絕對(duì)確定每個(gè)列表將包含的項(xiàng)目數(shù)量及其順序。嵌套列表中的缺失值可能導(dǎo)致Sass不報(bào)告的錯(cuò)誤，而對(duì)于映射，即使缺少一個(gè)值，map-get()函數(shù)仍然可以提供所需的值。

本文標(biāo)題可能會(huì)讓一些人感到意外。如果您是Sass老手，您可能還記得使用列表的列表來(lái)模擬嵌套數(shù)據(jù)數(shù)組的日子（在Ruby-Sass-3.3之前）。(Ruby) Sass 3.3添加了一種名為映射的新數(shù)據(jù)類(lèi)型。列表的列表可以以嵌套格式保存復(fù)雜數(shù)據(jù)，但沒(méi)有鍵值配對(duì)。映射添加了鍵值對(duì)，并讓我們創(chuàng)建數(shù)據(jù)數(shù)組。

隨著映射的出現(xiàn)，我們?cè)S多Sass用戶開(kāi)始將所有內(nèi)容都放入映射中（并且有充分的理由?。?。所有斷點(diǎn)寬度、顏色值、網(wǎng)格布局、類(lèi)型比例和其他響應(yīng)式排版細(xì)節(jié)都可以放入映射中！

現(xiàn)在Sass有了鍵值對(duì)映射，還有使用列表的列表的好理由嗎？一個(gè)理論上的原因是向后兼容性：如果您的Sass可能由安裝了較舊版本的開(kāi)發(fā)人員維護(hù)，列表將幫助他們。然而，在實(shí)踐中，Sass版本通常由package.json或其他項(xiàng)目配置控制，并且Ruby gem只需一個(gè)命令即可更新（gem update sass）。

您可能選擇使用嵌套列表而不是映射的一個(gè)更實(shí)際的原因是輸入較少。讓我們比較一下映射和嵌套列表，看看它們?cè)诟髯哉Z(yǔ)法和循環(huán)遍歷方式上的比較。

語(yǔ)法比較

在我們的示例中，讓我們創(chuàng)建一個(gè)控制響應(yīng)式排版的 數(shù)據(jù)結(jié)構(gòu)。它將存儲(chǔ)四個(gè)斷點(diǎn)（好吧，一個(gè)是最小的默認(rèn)視圖）。對(duì)于每個(gè)斷點(diǎn)，我們將存儲(chǔ)最小寬度、最大寬度、基本字體大小和基本行高。

復(fù)雜的映射語(yǔ)法

以下是我們將數(shù)據(jù)存儲(chǔ)在映射中的方法。一個(gè)大型映射將包含四個(gè)鍵（斷點(diǎn)標(biāo)簽），其值是我們需要存儲(chǔ)和使用的變量的映射。以這種可讀的格式，我們有超過(guò)450個(gè)字符和26行。

<code>$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>

嵌套列表語(yǔ)法

存儲(chǔ)相同數(shù)據(jù)的嵌套列表要短得多。但是，我們不再將鍵附加到數(shù)據(jù)，因此我們必須依賴于循環(huán)遍歷它或使用nth()函數(shù)調(diào)用它。也就是說(shuō)，它比映射短得多：少于180個(gè)字符，只有6行。

<code>$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>

循環(huán)比較

在編寫(xiě)數(shù)據(jù)結(jié)構(gòu)時(shí)，編寫(xiě)列表大約只需要編寫(xiě)映射時(shí)間的三分之一。但是，如果我們需要循環(huán)遍歷這些值，那又如何比較呢？

復(fù)雜的映射循環(huán)

我們可以使用以下代碼循環(huán)遍歷此映射中的頂級(jí)項(xiàng)目：

<code>@each $label, $map in $breakpoint-map {}</code>

此行開(kāi)頭的兩個(gè)變量（$label和$map）在循環(huán)迭代映射中的數(shù)據(jù)時(shí)動(dòng)態(tài)分配。每個(gè)頂級(jí)數(shù)據(jù)塊有兩個(gè)組成部分：鍵和值。我們將鍵分配給$label，并將值（這是一個(gè)嵌套映射）分配給$map。在這個(gè)循環(huán)中，我們可以使用變量$label和$map，它們將自動(dòng)表示當(dāng)前條目的鍵和值。

該循環(huán)將迭代四次，每次迭代一個(gè)嵌套映射。但是，要從嵌套映射中獲取有用的數(shù)據(jù)，我們需要使用map-get()函數(shù)。此函數(shù)采用兩個(gè)參數(shù)——映射的名稱(chēng)和所需鍵的名稱(chēng)——并返回與該鍵關(guān)聯(lián)的值。它是Sass中PHP的$array['key']和$object->key或JavaScript的object.key語(yǔ)法的等效項(xiàng)。

要使用@each迭代所有子映射并將它們的值使用map-get()分配給有用的變量，我們最終得到一個(gè)6行、220個(gè)字符的循環(huán)。

<code>@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>

嵌套列表循環(huán)

嵌套列表確實(shí)使循環(huán)效率更高。對(duì)于映射，我們必須將映射分配給動(dòng)態(tài)循環(huán)變量，然后使用map-get()將所有值分配給變量，但是對(duì)于列表，我們可以快速地將所有值分配給變量。

由于頂級(jí)列表中的每個(gè)項(xiàng)目都按相同順序具有相同的五個(gè)值，因此我們可以立即將每個(gè)值分配給動(dòng)態(tài)變量以在循環(huán)中使用。使用這些變量，我們不需要使用map-get()將子值分配給可用的變量。我們需要的嵌套列表循環(huán)只有兩行，少于100個(gè)字符。

<code>@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
}</code>

嵌套列表警告

嵌套列表是主要的開(kāi)發(fā)人員性能優(yōu)勢(shì)：總的來(lái)說(shuō)，您輸入的內(nèi)容可能不到使用映射時(shí)的一半。但是，添加映射到Sass是有原因的：它們提供列表不具備的功能：鍵值映射。

缺失值

如果您要依賴嵌套列表，您必須絕對(duì)確定您知道每個(gè)列表將包含多少個(gè)項(xiàng)目以及它們的順序。讓我們看看如果我們?cè)诹斜碇羞z漏了一個(gè)項(xiàng)目，上面的示例會(huì)發(fā)生什么：

<code>$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>

如果我們嘗試運(yùn)行該代碼，最后一個(gè)列表將中斷。它將正確地將“xlarge”分配給$label并將“1100px”分配給$min-width，但隨后它將“21px”分配給$max-width并將“1.618”分配給$base-font，使$vertical-rhythm為空。結(jié)果，我們?cè)谧詈笠粋€(gè)斷點(diǎn)中得到一個(gè)無(wú)效的字體大小聲明和一個(gè)缺少的行高屬性。此外，Sass不會(huì)為此報(bào)告錯(cuò)誤，因此我們不知道事情是否成功。如果我們嘗試將最大寬度用于媒體查詢，我們將最終得到字體大小值（只有21px）——我認(rèn)為這將是一個(gè)非常無(wú)用的最大寬度！

如果我們改用映射，即使缺少一個(gè)值，map-get()函數(shù)也會(huì)給我們提供我們需要的東西。這就是我們的權(quán)衡：我們?cè)诹斜碇蝎@得的簡(jiǎn)單性和速度，我們?cè)谟成渲惺チ颂禺愋院头厘e(cuò)性。

查詢特定列表

使用嵌套列表的另一個(gè)相關(guān)問(wèn)題是查詢特定列表。由于映射具有鍵，因此您可以使用map-get()快速訪問(wèn)任何子映射：

<code>$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>

要從嵌套列表中獲取中等列表的數(shù)據(jù)，我們需要一個(gè)更復(fù)雜的函數(shù)：

<code>@each $label, $map in $breakpoint-map {}</code>

該函數(shù)循環(huán)遍歷$breakpoint-list中的所有列表，檢查我們想要標(biāo)簽的第一個(gè)值，如果找到匹配項(xiàng)則返回列表。如果在沒(méi)有找到匹配項(xiàng)的情況下到達(dá)@each循環(huán)的末尾，它將返回null。它基本上是列表的map-get()的快速自制解釋?zhuān)褂玫谝粋€(gè)值作為偽鍵。

缺失映射函數(shù)

Sass有很多有用的函數(shù)可以處理映射：嵌套列表不存在相同的函數(shù)。例如，您可以使用map-merge()向映射添加其他鍵值對(duì)。使用具有共享鍵的map-merge()將更新共享鍵的值。您可以使用join()或append()添加一個(gè)新列表，但是模擬map-merge()的更新功能將需要另一個(gè)自定義Sass函數(shù)。

另一個(gè)有用的映射函數(shù)是map-has-key()。此函數(shù)對(duì)于驗(yàn)證依賴于map-get()的任何自定義函數(shù)非常有用。但是，列表沒(méi)有可比的函數(shù)。

您可以使用SassyLists模擬列表的映射函數(shù)。（在Sass添加映射支持之前，此庫(kù)提供了這些函數(shù)。）

結(jié)論

由于映射使用鍵值對(duì)，因此它們比列表更強(qiáng)大。附加的Sass映射函數(shù)提供了查找數(shù)據(jù)和驗(yàn)證映射值的實(shí)用方法。

嵌套Sass列表編寫(xiě)和維護(hù)起來(lái)可能更快，但它們可能不如映射那樣適合錯(cuò)誤檢查或詳細(xì)查詢。大多數(shù)情況下，我認(rèn)為映射是更好的選擇，盡管冗長(zhǎng)性有所增加。對(duì)于較小的代碼塊和單次使用循環(huán)，我偶爾會(huì)使用嵌套列表，但映射更適合項(xiàng)目范圍的設(shè)置和數(shù)據(jù)存儲(chǔ)。

您是否在您的任何工作中比較了映射和嵌套列表，或者重構(gòu)了代碼以優(yōu)先使用一個(gè)而不是另一個(gè)？在評(píng)論中分享您的經(jīng)驗(yàn)！

您可以在此Sassmeister gist中看到本教程中使用的代碼。

Sass映射與嵌套列表的常見(jiàn)問(wèn)題解答 (FAQ)

Sass映射和嵌套列表之間的主要區(qū)別是什么？

Sass映射和嵌套列表都是Sass預(yù)處理器中的強(qiáng)大工具，但它們有明顯的區(qū)別。Sass映射類(lèi)似于其他編程語(yǔ)言中的關(guān)聯(lián)數(shù)組，其中每個(gè)值都與一個(gè)唯一的鍵相關(guān)聯(lián)。這使得檢索、更新和操作數(shù)據(jù)變得容易。另一方面，嵌套列表是一系列值，類(lèi)似于JavaScript中的數(shù)組。當(dāng)您需要存儲(chǔ)和迭代一系列值時(shí)，它們最適合使用，但它們?nèi)狈τ成涮峁┑闹苯釉L問(wèn)特定值的功能。

如何使用Sass映射？

要使用Sass映射，您首先需要使用一對(duì)括號(hào)定義一個(gè)映射，每個(gè)鍵值對(duì)用冒號(hào)分隔。例如，$map: (key1: value1, key2: value2)。然后，您可以使用map-get函數(shù)訪問(wèn)映射中的值，如下所示：map-get($map, key1)。

我可以像嵌套列表一樣嵌套Sass映射嗎？

是的，您可以像嵌套列表一樣嵌套Sass映射。當(dāng)您想要將相關(guān)數(shù)據(jù)組合在一起時(shí)，這尤其有用。要訪問(wèn)嵌套映射中的值，您需要使用兩次map-get函數(shù)：map-get(map-get($map, key1), key2)。

如何迭代Sass映射？

您可以使用@each指令迭代Sass映射。@each指令采用兩個(gè)變量：鍵和值。這是一個(gè)示例：@each $key, $value in $map { … }。

使用Sass映射而不是嵌套列表的優(yōu)點(diǎn)是什么？

Sass映射比嵌套列表具有幾個(gè)優(yōu)點(diǎn)。它們?cè)试S直接訪問(wèn)特定值，使您的代碼更高效且更易于閱讀。它們還提供用于操作映射的內(nèi)置函數(shù)，例如添加、刪除和更新鍵值對(duì)。

我可以將嵌套列表轉(zhuǎn)換為Sass映射嗎？

是的，您可以使用map-from-list函數(shù)將嵌套列表轉(zhuǎn)換為Sass映射。此函數(shù)采用一對(duì)列表并返回一個(gè)映射，其中每一對(duì)都是映射中的鍵值對(duì)。

如何在Sass中使用嵌套列表？

要在Sass中使用嵌套列表，您首先需要使用一對(duì)括號(hào)定義一個(gè)列表，每個(gè)值用空格或逗號(hào)分隔。例如，$list: (value1, value2, value3)。然后，您可以使用nth函數(shù)訪問(wèn)列表中的值，如下所示：nth($list, 1)。

我可以同時(shí)使用Sass映射和嵌套列表嗎？

是的，您可以同時(shí)使用Sass映射和嵌套列表。例如，您可以使用映射來(lái)存儲(chǔ)一系列列表，反之亦然。這對(duì)于組織復(fù)雜的數(shù)據(jù)結(jié)構(gòu)很有用。

使用Sass映射或嵌套列表有什么限制？

雖然Sass映射和嵌套列表是強(qiáng)大的工具，但它們確實(shí)有一些限制。例如，Sass映射不能有重復(fù)的鍵，并且映射中鍵的順序不能保證。同樣，如果嵌套列表變得太大或太復(fù)雜，則可能難以管理。

如何在使用Sass映射或嵌套列表之間進(jìn)行選擇？

使用Sass映射或嵌套列表的選擇取決于您的具體需求。如果您需要直接訪問(wèn)特定值并能夠操作數(shù)據(jù)，則Sass映射可能是最佳選擇。如果您只需要存儲(chǔ)和迭代一系列值，則嵌套列表就足夠了。

以上是SASS地圖與嵌套列表的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！