时间戳

首页 > 解决方案 > 如何从 SCSS Map 中 @each 循环内的键中获取嵌套值

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

问题描述

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

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

我确实有一个map-deep-get 函数，但是在 @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

解决方案

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

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

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

推荐阅读