什么是 Map

map 用来表示键值对的映射，格式为 (key1: value, key2: value) ，其中 key 必须唯一。

与列表不同， map 必须用圆括号 () 括起来。空的 map 写为 () 。

但是，空列表也是写为 ()，怎么空的 map 和空列表一样呢？

因为，() 它既是映射又是列表。事实上，所有的 map 都可以算作列表，每个 map 都算是一个包含键值对的列表，每个列表元素就是一组键值对。例如 (a: b, c: d) 表示为 (a b, c d) 。

map 允许使用任何 Sass 值作为它的 key 。 Sass 将会用 == 操作符来判断两个 key 是否重复。

大多数情况下，强烈推荐使用**带引号的字符串 **作为 map 的 key 。因为有些值，比如颜色名，看起来像未加引号的字符串，但实际上不是字符串而是其他类型。为了避免混乱的问题，字符串作为 key 时都应该加上引号。

由于 map 不是合法的 CSS 值，它们自己不会做很多事情。这就是为什么 Sass 提供了一堆函数来创建 map 并访问它们包含的值。

示例代码

@use 'sass:map';

$font-weights: (
  'regular': 400,
  'medium': 500,
  'bold': 100,
);
$font-sizes: (
  'regular': 10,
  'medium2': 20,
  'bold3': 30,
);
$font-merge: map.merge($font-weights, $font-sizes);
$colors: (
  'black': #000,
  'primary': (
    'base': #409eff,
  ),
);
$colors-new: (
  'white': #fff,
  'primary': (
    'info': yellow,
  ),
);
$colors-merge: map.merge($colors, $colors-new);
$colors-deep-merge: map.deep-merge($colors, $colors-new);
$colors-deep-remove: map.deep-remove($colors-deep-merge, 'primary', 'info');
$colors-remove: map.remove($colors-deep-merge, 'primary', 'info');

.test {
  color: #0bc15f;
  font-weight: map.get($font-weights, 'medium');
  // 这里由于 map.get 获取的值不存在，所以不会输出到 css
  font-weight-null: map.get($font-weights, 'medium1');
  has-key-true: map.has-key($font-weights, 'medium');
  has-key-false: map-has-key($font-weights, 'medium-false');
  keys: map.keys($font-weights);
  values: map.values($font-weights);
  map-merge-keys: map.keys($font-merge);
  map-merge-values: map.values($font-merge);
  remove: map.keys(map.remove($font-merge, 'regular'));
  remove-one: map.keys(map.remove($font-merge, 'medium', 'bold'));
  remove-origin: map.keys($font-merge);
  // 修改原 map 的 regular 属性
  set: map.values(map.set($font-sizes, 'regular', 999));
  // 添加一个 map 属性值
  set-test: map.values(map.set($font-sizes, 'new_attr', '我是值'));
  // 上述的修改不会影响原来的 map 即 $font-sizes
  set-origin-map: map.values($font-sizes);
  // deep-merge
  map-deep-merge-color: map.get($colors-deep-merge, 'primary', 'base');
  // 采用 merge 合并后者的 primary 字段直接覆盖了前者，没有 base key 了
  map-merge-color: map.get($colors-merge, 'primary', 'base');
  map-merge-info-color: map.get($colors-merge, 'primary', 'info');

  // remove
  deep-remove: map.keys($colors-deep-remove);
  // 不存在，被移除了
  info-color-deep-remove: map.get($colors-deep-remove, 'primary', 'info');
  // 直接移除了一级的 key
  remove: map.keys($colors-remove);
}

编译后

.test {
  color: #0bc15f;
  font-weight: 500;
  has-key-true: true;
  has-key-false: false;
  keys: 'regular', 'medium', 'bold';
  values: 400, 500, 100;
  map-merge-keys: 'regular', 'medium', 'bold', 'medium2', 'bold3';
  map-merge-values: 10, 500, 100, 20, 30;
  remove: 'medium', 'bold', 'medium2', 'bold3';
  remove-one: 'regular', 'medium2', 'bold3';
  remove-origin: 'regular', 'medium', 'bold', 'medium2', 'bold3';
  set: 999, 20, 30;
  set-test: 10, 20, 30, '我是值';
  set-origin-map: 10, 20, 30;
  map-deep-merge-color: #409eff;
  map-merge-info-color: yellow;
  deep-remove: 'black', 'primary', 'white';
  remove: 'black', 'white';
}

如上述示例所示，我们定义了两个集合变量：$font-weights，$font-sizes。然后通过 sass 的 map 函数对数据进行一系列的操作

map.get($map, $key)：获取集合中的值，第一个参数表示 map ，第二个参数表示对应的 key ，指定的 key 不存在时返回 null 。
map.set($map， $key， $value)：向 map 添加新的键值对或修改已存在的键值对。它返回设置完成后的新的 map ，不会修改原 map 。
map.remove($map， $key1，$key2)：向 map 移除对应的 key，多个 key 用逗号分割。它返回移除后新的 map ，不会修改原 map 。
map.has-key($map, $key)：表示当前 map 是否含有对应的 key 值，返回一个 boolean 值
map.merge($map1, $map2)：合并 map 并返回合并后的新 map
map.keys($map)：返回 map 中所有的 key 组成的队列。
map.values($map)：返回 map 中所有的 value 并生成一个队列。
map.deep-merge($map1, $map2)：深合并 map 并返回合并后的新 map，对于子集合不会像 merge 采取覆盖式合并，而是深拷贝。
map.deep-remove($map, $key, $keys...)：向 map 移除对应 key 下面的子集合的 key 值。
从上述的操作可以发现 Sass 中的 map 被创建后是不可变的，所以所有的 map 方法都不是直接修改原 map ，而是操作完成后返回一个新的 map 出来。
map. 操作符可以使用 map- 去替代