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 (ширина страницы: 1170 пикселей, желоб: 30 пикселей, размер базового шрифта: 17 пикселей)», а не фактическую карту и поэтому непригодна для использования с функция map-get().

Есть идеи, как это сделать?


sass nested nested-lists sass-maps
person The Sloth    schedule 21.03.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете создать функцию, которая преобразует числовые индексы в строковые ключи:

@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.

Полный код на Sassmeister.
map-keys function описание.

person 3rdthemagical    schedule 21.03.2018
comment
Ах, это, кажется, делает работу отлично! Спасибо за быстрый ответ :) - person The Sloth; 21.03.2018