Карты в SASS

Articles

Карты в SASS

В этой статье объясняются карты в SASS.

Мы объясним основы и продвинутое использование карт в SASS и приведём практические примеры.

YouTube Video

Карты в SASS

Что такое карта в SASS?

Карта в SASS — это структура данных, содержащая пары «ключ-значение», аналогичная объектам в JavaScript или словарям в Python. Используя карты в SASS, вы можете компактно управлять сложными стилями и повысить удобство сопровождения кода.

Основной синтаксис карт

Карты в SASS определяются с помощью скобок (). Синтаксис следующий:.

1$map-name: (
2  key1: value1,
3  key2: value2,
4  key3: value3
5);

Например, чтобы создать карту для управления цветовыми темами, можно определить её следующим образом:.

1$colors: (
2  primary: #3498db,
3  secondary: #2ecc71,
4  danger: #e74c3c
5);

Получение значений из карты

В SASS для получения значения из карты используется функция map.get().

Пример использования:

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8.button {
 9  background-color: map.get($colors, primary);
10}

Вывод:

1.button {
2  background-color: #3498db;
3}

Этот код получает значение цвета primary из карты $colors и применяет его к цвету фона кнопки.

Установка ключей и значений в карте

С помощью функции map.set() можно присвоить новое значение указанному ключу. Если ключ уже существует, его значение будет перезаписано.

Пример использования

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8// set danger color
 9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12  background-color: map.get($updated-colors, danger);
13}

Этот код добавляет ключ danger в карту и устанавливает его значение в качестве цвета фона кнопки.

Вывод

1.button-danger {
2  background-color: #e74c3c;
3}

Удаление ключей из карты

С помощью функции map.remove() можно удалить определённый ключ и его значение из карты.

Пример использования

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13  background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17  background-color: map.get($reduced-colors, danger);
18}

Этот код удаляет ключ danger из карты, поэтому цвет фона у button-danger станет null.

Вывод

1.button-primary {
2  background-color: #3498db;
3}

Добавление ключей и значений в карту

С помощью функции map.merge() можно добавить новые ключи и значения в существующую карту.

Пример использования

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (danger: #e74c3c));
 9
10.button-danger {
11  background-color: map.get($extended-colors, danger);
12}

Этот код добавляет ключ danger в существующую карту SASS и устанавливает его значение в качестве цвета фона кнопки.

Вывод

1.button-danger {
2  background-color: #e74c3c;
3}

Добавление нескольких ключей и значений в карту

С помощью функции map.merge() можно добавить сразу несколько новых ключей и значений в существующую карту.

Пример использования

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (
 9  danger: #e74c3c,
10  warning: #f39c12,
11  info: #8e44ad
12));
13
14.button-danger {
15  background-color: map.get($extended-colors, danger);
16}

Этот код добавляет сразу несколько ключей и значений в существующую карту SASS.

Проверка наличия ключа в карте

Функция map.has-key() позволяет проверить, существует ли определённый ключ в карте.

Пример использования

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger);  // false

Получение всех ключей или значений из карты

Получение всех ключей

С помощью функции map.keys() можно получить все ключи.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)

Получение всех значений

С помощью функции map.values() можно получить все значения.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)

Перебор карты

В SASS можно использовать директиву @each для перебора карты.

Пример использования

 1$colors: (
 2  primary: #3498db,
 3  secondary: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $color in $colors {
 8  .color-#{$name} {
 9    background-color: $color;
10  }
11}

Этот код перебирает каждый ключ и значение в карте SASS и автоматически генерирует класс для каждого цвета.

Вывод

 1.color-primary {
 2  background-color: #3498db;
 3}
 4
 5.color-secondary {
 6  background-color: #2ecc71;
 7}
 8
 9.color-danger {
10  background-color: #e74c3c;
11}

Работа с вложенными картами

Карты также могут иметь вложенную структуру. В этом случае используйте вложенные функции map.get().

Пример использования

 1@use "sass:map";
 2
 3$themes: (
 4  light: (
 5    background: #ffffff,
 6    text: #000000
 7  ),
 8  dark: (
 9    background: #000000,
10    text: #ffffff
11  )
12);
13
14body {
15  background-color: map.get(map.get($themes, light), background);
16  color: map.get(map.get($themes, light), text);
17}

Этот код получает цвета фона и текста для темы light из вложенной карты SASS и применяет их к тегу body.

Вывод

1body {
2  background-color: #ffffff;
3  color: #000000;
4}

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

Используя карты, можно легко управлять медиазапросами и адаптивным дизайном.

Пример использования

 1$breakpoints: (
 2  small: 480px,
 3  medium: 768px,
 4  large: 1024px
 5);
 6
 7@each $label, $size in $breakpoints {
 8  @media (max-width: $size) {
 9    .container-#{$label} {
10      width: 100%;
11    }
12  }
13}

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

Вывод

 1@media (max-width: 480px) {
 2  .container-small {
 3    width: 100%;
 4  }
 5}
 6
 7@media (max-width: 768px) {
 8  .container-medium {
 9    width: 100%;
10  }
11}
12
13@media (max-width: 1024px) {
14  .container-large {
15    width: 100%;
16  }
17}

Заключение

Карты SASS — это мощный инструмент для организации стилей, повышения гибкости и переиспользуемости. Их можно использовать во многих случаях: для управления значениями, перебора элементов и реализации адаптивного дизайна.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Списки в SASS Вложенность в SASS