Sass Maps, или ассоциативные массивы

Development | Amber | Комментировать запись

Sass Maps (или просто мапы) – это новый тип данных Sass, представляющий собой связь между ключами и значениями.

Sass Maps позволяют использовать ключи для поиска значений. При этом ключи и значения могут быть представлены любыми другими типами данных. Значения можно группировать в именованные группы, после чего вы можете динамически получать к ним доступ. По синтаксису Sass Maps напоминают медиа-запросы в CSS, хотя прямого аналога Sass Maps в CSS на данный момент не существует. Базовый синтаксис Sass Maps имеет такой вид:

$map: (key1: value1, key2: value2, key3: value3)

Если вы знакомы с языками программирования, вы заметите, что Sass Maps похожи на массивы PHP или JavaScript или на словари Python, поэтому иногда (хотя и довольно редко) их называют ассоциативными массивами. Если вы не знаете языков программирования, представьте, что Sass Maps – это списки, в которых сгруппированы похожие элементы. Однако мапы отличаются от списков синтаксически: мапы всегда берутся в круглые скобки и всегда разделяются запятыми.

Примечание: Последнее значение в Sass Maps не обязательно закрывать запятой.

Sass Maps состоят из пар «ключ: значение». С их помощью вы можете легко группировать похожие переменные (например, цвета темы или контрольные точки). Для извлечения данных из Sass Maps существует функция map-get: в качестве первого параметра указывается название мапа, а затем – ключевое слово:

$theme: (
  primary: #f00,
  secondary: #0f0,
  neutral: #f2f2f2
);

a {
 color: map-get($theme, primary);
}

div {
  background-color: map-get($theme, neutral);
  color: map-get($theme, secondary);
}

Мапы нельзя преобразовать в обычный CSS. Если вы присвоите мап переменной в качестве значения или используете его как аргумент CSS-функции, вы получите ошибку. В отладке мапов используют функцию inspect($value).

Мапы Sass чрезвычайно полезны: они позволяют сделать ваш код более удобочитаемым и последовательным. При помощи Sass Maps вы можете выполнять итерацию по результатам и устранить повторяющиеся фрагменты в CSS.

Если вы не хотите работать с парами ключ/значение, обратитесь к простым спискам Sass.

Читайте также: Как работают списки в Sass