Карты

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

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

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

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

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

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

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

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

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

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

Сделайте что-нибудь для каждой пары permalinkСделайте что-нибудь для каждой пары

На самом деле здесь не используется функция, но это по-прежнему один из наиболее распространенных способов использования карт. Правило @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;
  }
}

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

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

@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

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

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

Добавить на карту permalinkДобавить на карту

Также полезно добавлять новые пары на карту или заменять значение существующего ключа. Функция 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)

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

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

@use "sass:map";

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

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

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

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

Карты в 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)

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