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) кажется, возвращает строку, содержащую "xl (ширина страницы: 1170px, желоб: 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 возвращает карту xl от $breakpoints и внешний map-get возвращает значение по ключу page-width,

---

Полный код на Сассмейстере.
map-keys описание функции.