Теория: Сложные типы данных

Помимо простых типов данных, таких как числа, булевые значения и другие, изученных в прошлых уроках, SASS предоставляет еще 2 типа данных:

• Списки (list);
• Ассоциативные массивы (map).

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

Списки

Списки являются самыми «простыми» из сложных структур. На самом деле вы с ними уже встречались, но не знали об этом. Почти любая строка в SASS является списком. Посмотрим на пример ниже:

$main-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Значение внутри переменной $main-font не что иное, как список. И в этом легко убедиться! В составе препроцессора SASS существуют специальные функции, которые позволяют нам работать со списками. Одной из таких функций является nth(). С помощью нее мы можем узнать значение списка по его индексу.

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

Списки могут задаваться и в другом синтаксисе. Для этого весь список оборачивается в круглые скобки, а между элементами ставится запятая или пробел. Это значит, что пример с переменной $main-font можно записать так:

$main-font: ("Segoe UI" Roboto "Helvetica Neue" Arial sans-serif);

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

Попробуем создать класс font-roboto, который установит шрифт Roboto для нужного нам элемента. Для этого, с помощью функции nth() возьмем второй элемент списка.

$main-font: ("Segoe UI" Roboto "Helvetica Neue" Arial sans-serif);

.font-roboto {
  font-family: nth($main-font, 2);
}

Результатом компиляции станет следующий CSS код:

.font-roboto {
  font-family: Roboto;
}

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

$indents: 1.3em, 2.1em, 3.3em, 4em;

.mt-1 {
  margin-top: nth($indents, 1);
}

.mx-3 {
  margin-left: nth($indents, 3);
  margin-right: nth($indents, 3);
}

Результатом компиляции станет следующий CSS код:

.mt-1 {
  margin-top: 1.3em;
}

.mx-3 {
  margin-left: 3.3em;
  margin-right: 3.3em;
}

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

Помимо выбора элемента из списка мы можем добавлять новые значения в существующий список. Это делается с помощью функции join(). Функция принимает список и значения, которые необходимо добавить.

$main-colors: #007bff, #6610f2;
$secondary-colors: #6f42c1, #dc3545;

$theme-colors: join($main-colors, $secondary-colors);

Теперь в переменной $theme-colors лежит список из всех доступных нам цветов.

Если же мы хотим добавить один элемент в существующий список, то для этого существует функция append(). Функция принимает список и элемент, который мы хотим добавить.

$main-colors: #007bff, #6610f2;
$main-colors: append($main-colors, #6f42c1);

.box-bg {
  background: nth($main-colors, 3);
}

Ассоциативные массивы

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

Ассоциативный массив записывается очень просто. Представим, что у нас есть шрифт, который поддерживает все доступные значения свойства font-weight. Мы хотим использовать не стандартные вариации normal и bold, а использовать цифровые значения. На списках это выглядело бы следующим образом:

$font-weights: 200, 400, 500, 800;

/*

  200 для значения light
  400 для значения normal
  500 для значения medium
  800 для значения bold

*/

.warning {
  font-weight: nth($font-weights, 4);
}

.user-name {
  font-weight: nth($font-weights, 2);
}

Скорее всего, вам нужно будет постоянно возвращаться к инициализации списка, чтобы вспомнить, какой индекс соответствует нужному сейчас значению. Не очень удобно. Превратим наш список в ассоциативный массив. Для этого необходимо взять список в круглые скобки, и внутри указывать пары ключ-значение.

$font-weights: (light: 200, normal: 400, medium: 500, bold: 800);

Чтобы выбрать значение по ключу, используется функция map.get(), аргументами которой являются ассоциативный массив и ключ, значение которого необходимо получить. Для работы функции map.get() и других, которые указываются через конструкцию map., необходимо указать строчку @use "sass:map". Это подключит все необходимые функции к нашему проекту.

В результате получится следующий код:

@use "sass:map";

$font-weights: (light: 200, normal: 400, medium: 500, bold: 800);

.warning {
  font-weight: map.get($font-weights, bold);
}

.user-name {
  font-weight: map.get($font-weights, normal);
}

После компиляции получится следующий CSS код:

.warning {
  font-weight: 800;
}

.user-name {
  font-weight: 400;
}

Для добавления нового значения в ассоциативный массив или объединения двух разных массивов используется функция map.merge(). Ее работа схожа с функцией join() у списков.

@use "sass:map";

$main-colors: (primary: #007bff, secondary: #6610f2);
$secondary-colors: (purple: #6f42c1, red: #dc3545);

$theme-colors: map.merge($main-colors, $secondary-colors);

В результате массив $theme-colors будет иметь следующие значения:

$theme-colors: (
  primary: #007bff,
  secondary: #6610f2,
  purple: #6f42c1,
  red: #dc3545
);

Важно: если в двух ассоциативных массивах содержатся одинаковые ключи, то будет выбрано значение, которое было последним. Заменим ключ purple на primary. Этот ключ также содержится в массиве $main-colors. После использования map.merge() массив $theme-colors будет выглядеть следующим образом:

$theme-colors: (
  primary: #6f42c1,
  secondary: #6610f2,
  red: #dc3545
);