映射

Sass 中的映射包含键值对，并且可以通过其对应的键轻松查找值。它们以 (<表达式>: <表达式>, <表达式>: <表达式>) 的形式编写。: 之前的表达式是键，之后的表达式是与该键关联的值。键必须是唯一的，但值可以重复。与列表不同，映射必须用括号括起来。一个没有对的映射写成 ()。

💡 有趣的事实

细心的读者可能会注意到，一个空映射 () 的写法与一个空列表相同。这是因为它同时被视为映射和列表。实际上，所有映射都被视为列表！每个映射都被视为一个列表，其中每个键值对包含一个包含两个元素的列表。例如，(1: 2, 3: 4) 被视为 (1 2, 3 4)。

映射允许将任何 Sass 值用作其键。 == 运算符用于确定两个键是否相同。

⚠️ 注意！

大多数情况下，最好使用带引号的字符串而不是不带引号的字符串作为映射键。这是因为一些值，例如颜色名称，可能看起来像不带引号的字符串，但实际上是其他类型。为了避免出现混淆的问题，只需使用引号！

使用映射使用映射永久链接

由于映射不是有效的 CSS 值，因此它们本身不会做太多事情。这就是 Sass 提供了许多函数来创建映射和访问它们包含的值的原因。

查找值查找值永久链接

映射都是关于关联键和值，所以自然地，有一种方法可以获得与键关联的值： map.get($map, $key) 函数！此函数返回映射中与给定键关联的值。如果映射不包含该键，它将返回 null。

  SCSS

  Sass

       游乐场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

  Sass

  CSS

       游乐场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

  Sass

       游乐场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

  Sass

       游乐场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

  Sass

       游乐场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

  Sass

       游乐场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)