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

Шаблонные селекторы SASS: Основы работы

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

Создадим шаблон для флекс-контейнера, внутри которого элементы должны центрироваться по всем осям. Чтобы создать шаблонный селектор, используется символ % и присваивается уникальное имя:

%flex-element-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

Чтобы применить эти стили к элементу, используется директива @extend. Добавим наш шаблон в CSS:

%flex-element-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center {
  @extend %flex-element-center;
}

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

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Как видно, директива @extend включает код CSS из другого селектора. И поэтому её можно использовать не только с шаблонными селекторами, а с любыми другими.

%flex-element-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info {
  color: blue;
  font-weight: bold;
  font-size: 1.5em;
}

.modal-info {
  @extend %flex-element-center;
  @extend .info;
  background: #fff;
  border: 3px solid blue;
}

В данном коде мы подключаем шаблон %flex-element-center в класс .modal-info, а также наследуем стили из класса .info. Итоговым результатом компиляции станет следующий код CSS:

.modal-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info, .modal-info {
  color: blue;
  font-weight: bold;
  font-size: 1.5em;
}

.modal-info {
  background: #fff;
  border: 3px solid blue;
}

Обратите внимание на получившийся порядок селекторов. А также на то, что селектор .modal-info продублировался в сгенерированном коде CSS. Это особенность директивы @extend. По умолчанию SASS не умеет объединять одинаковые селекторы. Но не стоит об этом беспокоиться. В такой компиляции нет ничего страшного, поэтому вы можете использовать директиву @extend и шаблонные селекторы.

Также как и с вложенностью селекторов, количество уровней включений директивой @extend неограниченно. Это не значит, что стоит включать стили из селектора, в котором включаются стили, в котором включаются стили, в котором включаются стили... SASS вам это не запретит, но вы из будущего себя настоящего за это не полюбите. Разобраться в такой каше включений иногда сложнее, чем просто переписать код.

.color {
  color: blue;

  &-white {
    color: white;
  }
}

.badge {
  @extend .color;
  background: white;

  &.info {
    background: blue;
    @extend .color-white;
  }
}

.badge-modal {
  @extend .badge;
  position: absolute;
}

Этот «чудесный» код скомпилируется в следующий CSS:

.color, .badge, .badge-modal {
  color: blue;
}
.color-white, .badge.info, .info.badge-modal {
  color: white;
}

.badge, .badge-modal {
  background: white;
}
.badge.info, .info.badge-modal {
  background: blue;
}

.badge-modal {
  position: absolute;
}

Дополнительное задание

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


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

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

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

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

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

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

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

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

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

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

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

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

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

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

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

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

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

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

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

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