Шаблонные селекторы

Препроцессор 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;
}

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

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

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →