地图

Sass中的地图包含成对的键和值，并易于通过其对应的键查找值。他们是书面的(<expression>: <expression>, <expression>: <expression>)。在表达前的:是关键，且表达后是与该键相关联的值。键必须是唯一的，但值可以重复。与list不同，必须在地图上加上括号。写入不成对的地图  ()。

映射允许将任何Sass值用作其键。该==操作  被用来确定两个键是否相同。

使用地图永久链接使用地图

由于地图不是有效的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

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

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

为每一对做某事 permalink为每一对做某事

这实际上并没有使用函数，但是它仍然是使用地图的最常用方法之一。该@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;
  }
}

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

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

@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

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

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

添加到地图永久链接添加到地图

将新对添加到地图或替换现有键的值也很有用。该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"

$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
// )

map.merge() 通常与内联映射一起使用以添加单个键/值对。

@use "sass:map";

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

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

@use "sass:map"

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

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

如果两个地图都具有相同的键，则第二个地图的值将在返回的地图中使用。

@use "sass:map";

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

@debug map.merge($font-weights, ("medium": 600));
// ("regular": 400, "medium": 600, "bold": 700)

@use "sass:map"

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

@debug map.merge($font-weights, ("medium": 600))
// ("regular": 400, "medium": 600, "bold": 700)

请注意，由于Sass映射是不可变的，因此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)

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