Карты

Карты в Sass содержат пары ключей и значений и позволяют легко получить значение по соответствующему ключу. Они записываются (<expression>: <expression>, <expression>: <expression>). Выражение перед : является ключом, а выражение после него — значением, связанным с этим ключом. Ключи должны быть уникальными, но значения могут повторяться. В отличие от списков, карты обязательно должны записываться в круглых скобках. Карта без пар записывается ().

В качестве ключей карт можно использовать любые значения Sass. Для определения того, являются ли два ключа одинаковыми, используется оператор ==.

Использование карт

Поскольку карты не являются допустимыми значениями CSS, они сами по себе не выполняют никаких действий. Вот почему Sass предоставляет множество функций для создания карт и доступа к содержащимся в них значениям.

Поиск значения

Карты предназначены для связывания ключей и значений, поэтому существует способ получить значение, связанное с ключом: функция map.get($map, $key)! Эта функция возвращает значение в карте, связанное с заданным ключом. Если в карте отсутствует ключ, она возвращает null.

@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null

// SASS
@use "sass:map"
$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.get($font-weights, "medium")  // 500
@debug map.get($font-weights, "extra-bold")  // null

Выполнение действия для каждой пары

Это не функция, но это один из самых распространенных способов использования карт. Правило @each обрабатывает блок стилей для каждой пары ключ/значение в карте. Ключ и значение присваиваются переменным, чтобы к ним можно было легко получить доступ в блоке.

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

// SASS
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph

/* CSS */
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

Добавление в карту

Также полезно добавлять новые пары в карту или изменять значение для существующего ключа. Функция map.set($map, $key, $value) выполняет это: она возвращает копию $map со значением в $key, установленным в $value.

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.set($font-weights, "extra-bold", 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900);
// ("regular": 400, "medium": 500, "bold": 900)

// SASS
@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.set($font-weights, "extra-bold": 900)
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900)
// ("regular": 400, "medium": 500, "bold": 900)

Вместо установки значений по одному, можно также объединить две существующие карты, используя map.merge($map1, $map2).

@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

// SASS
@use "sass:map"

$light-weights: ("lightest": 100, "light": 300)
$heavy-weights: ("medium": 500, "bold": 700)

@debug map.merge($light-weights, $heavy-weights)
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

Если у обеих карт одинаковые ключи, значения второй карты используются в возвращаемой карте.

@use "sass:map";

$weights: ("light": 300, "medium": 500);

@debug map.merge($weights, ("medium": 700));
// ("light": 300, "medium": 700)

// SASS
@use "sass:map";

$weights: ("light": 300, "medium": 500)

@debug map.merge($weights, ("medium": 700))
// ("light": 300, "medium": 700)

Обратите внимание, что поскольку карты Sass являются неизменяемыми, map.set() и map.merge() не изменяют исходный список.

Неизменяемость

Карты в Sass являются неизменяемыми, что означает, что содержимое значения карты никогда не изменяется. Все функции карт Sass возвращают новые карты, а не изменяют исходные. Неизменяемость помогает избежать многих скрытых ошибок, которые могут возникнуть, когда одна и та же карта используется в разных частях таблицы стилей.

Вы по-прежнему можете обновлять свое состояние со временем, присваивая новые карты той же переменной. Это часто используется в функциях и миксинах для отслеживания конфигурации в карте.

@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@mixin add-browser-prefix($browser, $prefix) {
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global;
}

@include add-browser-prefix("opera", o);
@debug $prefixes-by-browser;
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)

// SASS
@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@mixin add-browser-prefix($browser, $prefix)
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global


@include add-browser-prefix("opera", o)
@debug $prefixes-by-browser
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)