地图（Maps）

Sass 中的映射包含键和值对，并且可以通过对应的键轻松查找值。他们格式：:, :。表达式的前面是键，后面的是与该键关联的值。键必须是唯一的，但值可能会重复。与列表不同，映射必须用括号括起来。写了一张没有对的地图()。

Maps 允许将任何 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

为每一对做点什么

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

@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.set($map,$key,$value)函数执行此操作：它返回$map的副本，其值$key设置为$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 的地图函数都返回新地图而不是修改原始地图。不变性有助于避免在样式表的不同部分共享同一个映射时可能出现的许多偷偷摸摸的错误。

不过，您仍然可以通过将新地图分配给同一变量来随着时间的推移更新您的状态。这通常用于函数和 mixin 中以跟踪地图中的配置。

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com