它们写成(<expression>: <expression>, <expression>: <expression>)。 : 之前的 expression 是键，后面的表达式是与该键关联的值。 键必须是唯一的，但值可以重复。 与 lists 不同，映射_必须_用括号括起来。 没有对的映射被写为 ()。
💡 有趣的事实：
精明的读者可能会注意到空映射“()”与空列表的写法相同。 那是因为它既是地图又是列表。 事实上，all 地图算作列表！ 每个映射都算作一个列表，其中包含每个键/值对的二元素列表。 例如，(1: 2, 3: 4) 算作(1 2, 3 4)。
映射允许将任何 Sass 值用作它们的键。 == 运算符 用于判断两个键是否相同。
⚠️ 注意！
大多数时候，对映射键使用 quoted strings 而不是 unquoted strings 是个好主意。 这是因为某些值(例如颜色名称)可能_看起来_像未加引号的字符串，但实际上是其他类型。 为避免混淆问题，只需使用引号！
使用地图
由于地图不是有效的 CSS 值，它们自己不会做很多事情。 这就是为什么 Sass 提供了一堆 函数 来创建映射并访问它们包含的值。
查找值
映射都是关于关联键和值的，因此自然有一种方法可以获取与键关联的值：map.get($map, $key) 函数！
此函数返回映射中与给定键关联的值。 如果地图不包含键，它会返回 null。
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null
为每一对做点什么
这实际上并没有使用函数，但它仍然是使用地图的最常见方式之一。 @each 规则 为映射中的每个键/值对评估一个样式块。
键和值被分配给变量，因此可以在块中轻松访问它们。
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
}
}
添加到地图
将新对添加到地图或替换现有键的值也很有用。 map.set($map, $key, $value) 函数 执行此操作：它返回值为 $key 的 $map的副本 设置为 $value。
@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) 合并两个现有地图。
@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)
如果两个映射具有相同的键，则第二个映射的值将用于返回的映射中。
@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 的地图函数都返回新地图而不是修改原始地图。 不变性有助于避免在样式表的不同部分共享同一张地图时可能潜入的许多偷偷摸摸的错误。 不过，您仍然可以通过将新地图分配给同一变量来随着时间的推移更新您的状态。 这通常用于函数和混合中以跟踪映射中的配置。
@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)