SASS: Программирование
2026-02-26 19:59 Diff
https://ru.hexlet.io/courses/sass-programming/lessons/list-and-maps/theory_unit

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

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

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

Списки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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