Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

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

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

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

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

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

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

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

11 <h2>Дополнительное задание</h2>

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