Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Сложные типы данных SASS: Программирование

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

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

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

Списки

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

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

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

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

Попробуем создать класс .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, аргументами которой являются ассоциативный массив и ключ, значение которого необходимо получить. В результате получится следующий код:

$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 у списков.

$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-color. После использования map-merge массив $theme-colors будет выглядеть следующим образом:

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

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»