Шаблонные селекторы — 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;
}

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

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

---

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

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

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

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»