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

我在尝试检索嵌套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）

似乎返回一个包含“xl（page-width:1170px，gutter:30px，base-font-size:17px）”的字符串，而不是实际的map-get（）函数无法使用

---

有什么想法吗？

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

@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

从

$breakpoints

返回map

xl

，外部

map get

按键返回值

页面宽度

---

打开完整代码。

---

映射键

功能。

啊，这似乎很好！感谢您的快速回复：）