SCSS/SASS 从第 n 个嵌套映射中获取值

Question

我在尝试检索嵌套 sass 映射中的值时遇到问题。我有一张看起来像这样的地图：

$breakpoints : (
    xl: (
         page-width: 1170px,
         gutter: 30px,
         base-font-size: 17px
    ),
    l: (
         breakpoint: 1170px,
         page-width: 980px,
         gutter: 20px,
         base-font-size: 17px
    )
);

我正在尝试在第一个嵌套列表 "xl" 中检索变量。这个想法是通过索引而不是键名检索嵌套列表，因为这应该能够根据用户的喜好进行修改。

我原以为使用 map-get(nth($breakpoints, 1), page-width) 会奏效，但 nth($breakpoints, 1) 似乎 return 包含 "xl (page-width: 1170px, gutter: 30px, base-font-size: 17px)" 的字符串而不是实际地图，因此无法使用map-get() 函数。

关于如何做到这一点有什么想法吗？

Answer 1

您可以创建一个将数字索引转换为字符串键的函数：

@function index-to-key($index) {
  $keys: map-keys($breakpoints); // A list of all keys in a $breakpoints map

  @return nth($keys, $index);
}

然后调用这个函数：

width: map-get(map-get($breakpoints, index-to-key(1)), page-width);

其中内部 map-get returns 来自 $breakpoints 的映射 xl 和外部 map-get returns 键值 page-width .

Sassmeister 上的完整代码。
map-keys 函数 description.

SCSS/SASS 从第 n 个嵌套映射中获取值

SCSS/SASS get values from nth nested maps

sass

nested

nested-lists

sass-maps