如何从 SCSS Map 中 @each 循环内的键中获取嵌套值答案

【问题标题】：How to get a nested value from a key inside of a @each loop in SCSS Map如何从 SCSS Map 中 @each 循环内的键中获取嵌套值
【发布时间】：2018-10-02 16:20:15
【问题描述】：

我正在尝试从 SCSS 映射的 @each 循环中的键内的键访问特定值。

我需要在地图中设置两个左侧位置：一个用于桌面，另一个用于移动设备，但很难从左侧获取值。我不知道该怎么做。

我确实有一个map-deep-get function，但是在@each 循环内部它会中断。如果没有其他功能，我正在尝试做的事情是否可行？

我在下面有一些注释掉的尝试，但一切都失败了。不完全确定如何处理，感谢您提供的任何帮助。

$character-map: (
  billy: (
    name: 'billy',
    color: $colour-light-blue,
    left: (-1px, -2px),
  )
);

@each $key, $value in $character-map {
    &.dialogue-item-#{map-get($value, name)},
    &.guide-item-#{map-get($value, name)} {
        .character-head {
            background: lighten(map-get($value, color), 18%);
            border-color: map-get($value, color);

            // Actual Characters Head
            img {
               @include media-breakpoint-up(sm) {
                //left: map-get(($value, left), nth($value, 1));
                //left: map-get($value, nth(left, 1));
              }
            }
          }
        }
    }

【问题讨论】：

标签： sass

【解决方案1】：

我已经通过大量实验弄清楚了，也许这会对正在寻找的人有所帮助。

如果你稍微改变一下地图，你就可以做到这一点。

$character-map: (
  billy: (
    name: 'billy',
    color: $colour-light-blue,
    left: (
        default: -9px,
        mobile: -2px
     ),
  )
);

@each $key, $value in $character-map {
    left: map-get(map-get($value, left), default);
}

将编译为left: 9px;

【讨论】：