Мапы (Ассоциативные массивы)

Мапы, или ассоциативные массивы, представляют собой связь между ключами и значениями, где ключи используются для поиска значений. Они позволяют легко собирать значения в именованные группы и получать доступ к этим группам динамически. Они не имеют прямого аналога в CSS, хотя они синтаксически похожи на media-запросы:

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

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

В отличие от списков, мапы всегда должны быть заключены в скобки и всегда должны быть разделены запятыми. И ключи и значения в мапах могут быть любыми объектами SassScript. Мап может иметь только одно сопоставление с заданным ключом (хотя это значение может быть списком). Значение ключа, конечно же, может быть сопоставлено многим значениям.

Как и со списками, манипуляции с мапами в основном происходят через функции SassScript. Функция map-get смотрит значение в мапе, функция map-merge объединяет две мапы в одну новую. Директива @each может быть использована для добавления стилей для каждой пары ключ-значение в мапе. Порядок пар всегда остается неизменным с момента создания мапа.

Мапы можно использовать везде, где применимы списки. Если для манипуляции мапами используются функции для списков, то мапы будут рассматриваться как список пар. Например, (key1: value1, key2: value2) будет рассматриваться этими функциями как вложенный список key1 value1, key2 value2. Однако, обратное утверждение верно только для пустого списка (), в остальных случаях списки не могут рассматриваться как мапы. () представляет собой одновременно мапы без пар ключ-значение и список без элементов.

Заметьте, что ключами мапа может быть любой тип Sass данных (даже другой массив) и синтаксис для объявления мапа допускает произвольное применение SassScript-выражений, которые будут рассчитаны для определения ключа мапа.

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

$status-colors: (
  primary: #000,
  success: #27BA6C,
  info: #03a9f4,
  warning: #FF8833,
  danger: #ff1a1a
);

.message {

  @each $status, $color in $status-colors {

    &--#{$status} {
      background: $color;
    }
  }
}

$status-colors: (
  primary: #000,
  success: #27BA6C,
  info: #03a9f4,
  warning: #FF8833,
  danger: #ff1a1a
)

.message

  @each $status, $color in $status-colors
    &--#{$status}
      background: $color

.message--primary {
  background: #000;
}

.message--success {
  background: #27ba6c;
}

.message--info {
  background: #03a9f4;
}

.message--warning {
  background: #f83;
}

.message--danger {
  background: #ff1a1a;
}