Карты и модуль sass:map

Карта (map) — это набор пар «ключ — значение», похожий на объект в JavaScript. Вместо пяти отдельных переменных $breakpoint-sm, $breakpoint-md… вы храните одну карту $breakpoints и запрашиваете у неё значение по имени. Читать и изменять карты помогает модуль sass:map.

Создание карты

Карта записывается в круглых скобках: ключ, двоеточие, значение, пары через запятую. Добавьте точки перелома в styles/abstracts/_variables.scss:

// styles/abstracts/_variables.scss
$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 1024px,
);

Ключи обычно пишут строками в кавычках; запятая после последней пары разрешена. Карта — не значение CSS: её нельзя записать в свойство напрямую, из неё можно только читать значения.

Чтение значения

map.get() возвращает значение по ключу:

// styles/main.scss
@use "sass:map";
@use "abstracts/variables";
 
.container {
  max-width: map.get(variables.$breakpoints, "lg");
}

.container {
  max-width: 1024px;
}

Если ключа нет, map.get() возвращает null, а свойство со значением null просто не выводится.

Миксин точек перелома с именами

Теперь миксин из урока о @content может принимать имя вместо ширины. Добавьте его в styles/abstracts/_mixins.scss:

// styles/abstracts/_mixins.scss
@use "sass:map";
@use "variables";
 
@mixin from($name) {
  @media (min-width: map.get(variables.$breakpoints, $name)) {
    @content;
  }
}

// styles/components/_cards.scss
@use "../abstracts/mixins";
 
.cards {
  display: grid;
 
  @include mixins.from("md") {
    grid-template-columns: 1fr 1fr;
  }
}

// styles/main.scss
@use "components/cards";

.cards {
  display: grid;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

Все точки перелома сайта теперь живут в одной карте: чтобы изменить «md», правится одна строка.

Другие функции sass:map

Функция	Что делает
`map.has-key($map, $key)`	`true`, если ключ есть
`map.keys($map)`	Список всех ключей
`map.values($map)`	Список всех значений
`map.merge($map1, $map2)`	Новая карта с парами обеих; при повторе побеждает вторая
`map.remove($map, $key)`	Новая карта без ключа
`map.set($map, $key, $value)`	Новая карта с добавленным или заменённым ключом

map.merge() удобна, чтобы добавить ключи к карте из библиотеки:

// styles/main.scss
@use "sass:map";
 
$breakpoints: ("sm": 576px, "md": 768px);
$breakpoints: map.merge($breakpoints, ("xl": 1280px));
 
.wide {
  max-width: map.get($breakpoints, "xl");
}

.wide {
  max-width: 1280px;
}

Вложенные карты

Значением в карте может быть другая карта. Тогда map.get() принимает несколько ключей подряд:

// styles/main.scss
@use "sass:map";
 
$theme: (
  "button": ("bg": #2563eb, "text": white),
);
 
.btn {
  color: map.get($theme, "button", "text");
  background: map.get($theme, "button", "bg");
}

.btn {
  color: white;
  background: #2563eb;
}

Вложенные карты — основа для дизайн-токенов и тем дальше в курсе.

Частая ошибка

Опечатка в ключе не вызывает ошибки: map.get($breakpoints, "medium") вернёт null, миксин скомпилируется в @media (min-width: ), и браузер молча проигнорирует этот сломанный запрос. Проверяйте ключи через map.has-key() и останавливайте сборку через @error — как это сделать, показано в уроке о сообщениях отладки.

Спасибо, что читаете!