映射 (Maps)

Sass 中的映射儲存鍵值對，並且可以輕鬆地根據對應的鍵查詢值。它們的寫法是 (<expression>: <expression>, <expression>: <expression>)。 : 前面的表達式是鍵，後面的表達式是與該鍵關聯的值。鍵必須是唯一的，但值可以重複。與列表不同，映射*必須*用括號括起來。沒有鍵值對的映射寫成 ()。

💡 有趣小知識 (Fun fact)

敏銳的讀者可能會注意到，空映射 () 的寫法與空列表相同。這是因為它既是映射又是列表。事實上，*所有*映射都算作列表！每個映射都算作一個列表，其中包含每個鍵值對的雙元素列表。例如，(1: 2, 3: 4) 等同於 (1 2, 3 4)。

映射允許任何 Sass 值作為其鍵。== 運算子用於判斷兩個鍵是否相同。

⚠️ 注意 (Heads up!)

大多數情況下，最好使用引號字串而不是無引號字串作為映射鍵。這是因為某些值（例如顏色名稱）可能*看起來*像無引號字串，但實際上是其他類型。為了避免造成混淆，請使用引號！

使用映射使用映射 永久連結

由於映射 (map) 並非有效的 CSS 值，它們本身並沒有太多作用。這就是 Sass 提供了一系列 函式 來創建映射並訪問它們所包含值的 原因。

查找值查找值 永久連結

映射的重點在於關聯鍵和值，因此自然有一種方法可以獲取與鍵關聯的值：map.get($map, $key) 函式！此函式返回映射中與給定鍵關聯的值。如果映射不包含該 鍵，則返回 null。

測試平台

SCSS 語法

@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null
測試平台

Sass 語法

@use "sass:map"
$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.get($font-weights, "medium")  // 500
@debug map.get($font-weights, "extra-bold")  // null

對每一對鍵值執行操作對每一對鍵值執行操作 永久連結

這實際上並沒有使用函式，但它仍然是使用映射最常見的方法之一。@each 規則 會針對映射中的每個鍵值對評估程式碼區塊。鍵和值會被賦值給變數，以便在程式碼區塊中輕鬆 訪問。

測試平台

SCSS 語法

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}
測試平台

Sass 語法

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph

CSS 輸出

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

添加到映射添加到映射 永久連結

將新的鍵值對添加到映射或替換現有鍵的值也很有用。map.set($map, $key, $value) 函式 可以做到這一點：它返回 $map 的副本，其中 $key 的值設定為 $value。

測試平台

SCSS 語法

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.set($font-weights, "extra-bold", 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900);
// ("regular": 400, "medium": 500, "bold": 900)
測試平台

Sass 語法

@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.set($font-weights, "extra-bold": 900)
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900)
// ("regular": 400, "medium": 500, "bold": 900)

除了逐一設定值之外，您還可以可以使用 map.merge($map1, $map2) 合併兩個現有的 映射。

測試平台

SCSS 語法

@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)
測試平台

Sass 語法

@use "sass:map"

$light-weights: ("lightest": 100, "light": 300)
$heavy-weights: ("medium": 500, "bold": 700)

@debug map.merge($light-weights, $heavy-weights)
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

如果兩個映射具有相同的鍵，則返回的映射中將使用第二個映射的 值。

測試平台

SCSS 語法

@use "sass:map";

$weights: ("light": 300, "medium": 500);

@debug map.merge($weights, ("medium": 700));
// ("light": 300, "medium": 700)
測試平台

Sass 語法

@use "sass:map";

$weights: ("light": 300, "medium": 500)

@debug map.merge($weights, ("medium": 700))
// ("light": 300, "medium": 700)

請注意，由於 Sass 映射是 不可變的，因此 map.set() 和 map.merge() 不會修改原始 列表。

不可變性不可變性 永久連結

Sass 中的映射是*不可變的*，這意味著映射值的内容永遠不會改變。Sass 的映射函式都返回新的映射，而不是修改原始映射。不可變性有助於避免在樣式表不同部分共用同一個映射時可能潛入的許多隱藏 錯誤。

不過，您仍然可以通過將新的映射賦值給同一個變數來隨著時間推移更新狀態。這通常用於函式和 mixin 中以追蹤映射中的 配置。

測試平台

SCSS 語法

@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@mixin add-browser-prefix($browser, $prefix) {
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global;
}

@include add-browser-prefix("opera", o);
@debug $prefixes-by-browser;
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)
測試平台

Sass 語法

@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@mixin add-browser-prefix($browser, $prefix)
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global


@include add-browser-prefix("opera", o)
@debug $prefixes-by-browser
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)