Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <ul><li>Списки (list);</li>

3 <li>Ассоциативные массивы (map).</li>

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

5 <h2>Списки</h2>

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

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

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

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

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

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

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

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

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

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

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

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

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

19 <h2>Ассоциативные массивы</h2>

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

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

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

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

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

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

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

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

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