映射

Sass 中的映射保存成对的键和值，并且可以轻松地通过相应的键查找值。他们写着 (<expression>: <expression>, <expression>: <expression>)。: 之前的表达是键，后面的表达式是与该键关联的值。键必须是唯一的，但值可以重复。与列表不同，映射必须用括号括起来。没有对的映射被写为 ()。

¥Maps in Sass hold pairs of keys and values, and make it easy to look up a value by its corresponding key. They’re written (<expression>: <expression>, <expression>: <expression>). The expression before the : is the key, and the expression after is the value associated with that key. The keys must be unique, but the values may be duplicated. Unlike lists, maps must be written with parentheses around them. A map with no pairs is written ().

💡 Fun fact:

精明的读者可能会注意到，空映射 () 的写法与空列表相同。那是因为它既算作映射又算作列表。事实上，所有映射都算作列表！每个映射都算作一个列表，其中包含每个键/值对的二元素列表。例如，(1: 2, 3: 4) 算作 (1 2, 3 4)。

¥Astute readers may note that an empty map, (), is written the same as an empty list. That’s because it counts as both a map and a list. In fact, all maps count as lists! Every map counts as a list that contains a two-element list for each key/value pair. For example, (1: 2, 3: 4) counts as (1 2, 3 4).

映射允许使用任何 Sass 值作为它们的键。== 运算符用于判断两个密钥是否相同。

¥Maps allow any Sass values to be used as their keys. The == operator is used to determine whether two keys are the same.

⚠️ Heads up!

大多数时候，最好使用带引号的字符串而不是不带引号的字符串作为映射键。这是因为某些值（例如颜色名称）可能看起来像不带引号的字符串，但实际上是其他类型。为了避免出现令人困惑的问题，只需使用引号即可！

¥Most of the time, it’s a good idea to use quoted strings rather than unquoted strings for map keys. This is because some values, such as color names, may look like unquoted strings but actually be other types. To avoid confusing problems down the line, just use quotes!

使用映射使用映射 permalink

¥Using Maps

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

¥Since maps aren’t valid CSS values, they don’t do much of anything on their own. That’s why Sass provides a bunch of functions to create maps and access the values they contain.

查找一个值查找一个值 permalink

¥Look Up a Value

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

¥Maps are all about associating keys and values, so naturally there’s a way to get the value associated with a key: the map.get($map, $key) function! This function returns the value in the map associated with the given key. It returns null if the map doesn’t contain the key.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@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

      
      Playground
    Sass Syntax@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

为每一对做点什么为每一对做点什么 permalink

¥Do Something for Every Pair

这实际上并没有使用函数，但它仍然是使用映射的最常见方法之一。@each 规则评估映射中每个键/值对的样式块。键和值被分配给变量，以便可以在块中轻松访问它们。

¥This doesn’t actually use a function, but it’s still one of the most common ways to use maps. The @each rule evaluates a block of styles for each key/value pair in a map. The key and the value are assigned to variables so they can easily be accessed in the block.

  SCSS

  Sass

  CSS

      Playground
    SCSS Syntax$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

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

      Playground
    Sass Syntax$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 Output.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";
}

添加到映射添加到映射 permalink

¥Add to a Map

将新对添加到映射或替换现有键的值也很有用。map.set($map, $key, $value) 函数这样做：它返回 $map 的副本，并将 $key 处的值设置为 $value。

¥It’s also useful to add new pairs to a map, or to replace the value for an existing key. The map.set($map, $key, $value) function does this: it returns a copy of $map with the value at $key set to $value.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@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)

      
      Playground
    Sass Syntax@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) 合并两个现有映射，而不是逐一设置值。

¥Instead of setting values one-by-one, you can also merge two existing maps using map.merge($map1, $map2).

  SCSS

  Sass

      
      Playground
    SCSS Syntax@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)

      
      Playground
    Sass Syntax@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)

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

¥If both maps have the same keys, the second map’s values are used in the map that gets returned.

  SCSS

  Sass

      Playground
    SCSS Syntax@use "sass:map";

$weights: ("light": 300, "medium": 500);

@debug map.merge($weights, ("medium": 700));
// ("light": 300, "medium": 700)

      Playground
    Sass Syntax@use "sass:map";

$weights: ("light": 300, "medium": 500)

@debug map.merge($weights, ("medium": 700))
// ("light": 300, "medium": 700)

请注意，由于 Sass 映射为不可变的、map.set() 和 map.merge()，因此不会修改原始列表。

¥Note that because Sass maps are immutable, map.set() and map.merge() do not modify the original list.

不可变性不可变性 permalink

¥Immutability

Sass 中的映射是不可变的，这意味着映射值的内容永远不会改变。Sass 的映射函数都返回新映射而不是修改原始映射。不可变性有助于避免许多偷偷摸摸的错误，当同一个映射在样式表的不同部分共享时，这些错误可能会悄悄出现。

¥Maps in Sass are immutable, which means that the contents of a map value never changes. Sass’s map functions all return new maps rather than modifying the originals. Immutability helps avoid lots of sneaky bugs that can creep in when the same map is shared across different parts of the stylesheet.

不过，你仍然可以通过将新映射分配给同一变量来随时间更新状态。这通常用在函数和 mixin 中来跟踪映射中的配置。

¥You can still update your state over time by assigning new maps to the same variable, though. This is often used in functions and mixins to track configuration in a map.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@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)

      
      Playground
    Sass Syntax@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)