• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 地图(Maps)

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

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

    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规则为映射中的每个键/值对评估一组样式。键和值被分配给变量,因此可以在块中轻松访问它们。

    scss 语法css 语法
    $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)