Question

我正在尝试从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));
              }
            }
          }
        }
    }

Answer 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;

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

1 个答案: