如何使用地图

Question

我当时正在跟踪本文https://www.sitepoint.com/better-solution-managing-z-index-sass/，但是有一个缺少的链接，它没有将映射深度获取函数链接回z函数，而且演示程序也不起作用。我试过寻找，但没有找到帮助。

$z-layers: (
  "goku":            9001, 
  "shoryuken":       8000,
  "modal": (
    "base":           500,
    "close":          100,
    "header":          50,
    "footer":          10
  ),
  "default":            1,
  "below":             -1,
  "bottomless-pit": -9000
);

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

@function z($layer) {
  @if not map-has-key($z-layers, $layer) {
    @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
  }

  @return map-get($z-layers, $layer);
}

Answer 1

图深

语法

Dart Sass syntax:

@use "sass:list";
@use "sass:map";
@use "sass:meta";

@function map-deep-get($map, $keys...) {
   $scope: $map; $i: 1;
   @while (meta.type-of($scope) == map) and ($i <= list.length($keys)) {
      $scope: map.get($scope, list.nth($keys, $i));
      $i: $i + 1;
   }
   @return $scope;
}

Lib Sass syntax:

@function map-deep-get($map, $keys...) {
   $scope: $map; $i: 1;
   @while (type-of($scope) == map) and ($i <= length($keys)) {
      $scope: map-get($scope, nth($keys, $i));
      $i: $i + 1;
   }
   @return $scope;
}

使用方法：

这个map-deep-get函数让我们可以随意访问深度嵌套的值，也可以作为常规的map-get函数使用。

$exampleMap: (
   "foo": foo,
   "bar": (
      "barfoo": barfoo,
      "barbar": (
         "barbarfoo": barbarfoo,
      ),
   ),
);

Codepen Demo

非嵌套项：

@debug map-deep-get($exampleMap, "foo") //foo

嵌套项：

@debug map-deep-get($exampleMap, "bar", "barfoo") //barfoo

嵌套映射：

@debug map-deep-get($exampleMap, "bar", "barbar") //("barbarfoo": barbarfoo)

嵌套项：

@debug map-deep-get($exampleMap, "bar", "barbar", "barbarfoo") //barbarfoo

Answer 2

实际上，现在您可以直接使用map- get 来获取嵌套属性值：

$exampleMap: (
        "foo": 1px,
        "bar": (
                "barfoo": 6px,
                "barbar": (
                        "barbarfoo": orange,
                ),
        ),
);

.h-6 {
  background: map-get($exampleMap, "bar", "barbar", "barbarfoo");
}

https://www.sassmeister.com/gist/bf2c9476c254493f06fdd761f9d6e798