Использование шаблонов

Часто в проектах встречаются блоки, которые совершенно отличаются друг от друга по стилю, но имеют одно или несколько повторяющихся свойств. Обычно эти блоки имеют разные классы. Это значит, что на обычном CSS нам бы пришлось дублировать ту часть кода, которая описывает повторяющийся элемент. Но с помощью шаблонов препроцессора можно вынести свойства в отдельный участок кода, который позже можно подключать к нужным классам.

Конечно, можно создать отдельный класс, в который будут вынесены все повторяющиеся свойства и затем добавлять этот класс к нужным элементам. Например (рисунок 4.3):

Однако это требует изменения html-кода. Если классу требуется добавить множество разных свойств, то блок может быть перегружен разнообразными классами (рисунок 4.4):

Основу данного блока составляет только класс img-1, всё остальное является просто дополнительными классами, задающими разные свойства.

С помощью препроцессора SASS это всё можно вынести в css-код, не прибегая к изменению html-кода вообще.

1. Создайте несколько абзацев с разными классами в файле index.html (рисунок 4.5):

2. В файле style.scss задайте селекторы для данных абзацев. Назначим им разные свойства (рисунок 4.6):

3. Проверим результат в браузере (рисунок 4.7):

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

Шаблон имеет следующую конструкцию:

%имя_шаблона { Свойство; }

4. Создадим шаблон (рисунок 4.8):

Применяется шаблон через следующую конструкцию:

@extend %имя_шаблона;

5. Подключим шаблон к ранее созданным селекторам (рисунок 4.9):

6. Сохраним и проверим результат в браузере (рисунок 4.10):

Как видим все абзацы имеют подчеркивание.

Если заглянуть в style.css, то можно увидеть следующее (рисунок 4.11):

Для всех классов, к которым был подключен шаблон был создан отдельный селектор с заданным свойством.

Миксины

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

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

Миксины создаются с помощью следующей конструкции:

@mixin имя_примеси(переменные) { Свойство; }

1. Создайте миксин с двумя переменными в файле style.scss (рисунок 4.12):

Используется миксин через данную конструкцию:

@include имя_примеси(значение);

2. Замените у селекторов абзацев свойства font-size и color на миксин (рисунок 4.13):

Также в миксин можно выносить шаблоны, чтобы шаблон по умолчанию применялся к тем классам, к которым применяется миксин.

3. Вынесите у селекторов абзацев шаблон в миксин (рисунок 4.14):

Всё это позволило намного сократить наш код, оставив в селекторах только уникальные свойства (рисунок 4.15):

В файле style.css можно увидеть, что компилятор преобразовал все команды препроцессора в стандартный css формат (рисунок 4.16):

Математика

Также препроцессор SASS может производить математические операции, такие как сложить, вычесть, поделить и умножить.

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

Допустим ширина контейнера, в котором находятся блоки, 960px, а ширина блоков при размере окна браузера свыше 960px равна 300px, и нам необходимо задать ширину блока в процентах.

1. Добавьте в ранее созданный шаблон значение ширины для блока с использованием математики (рисунок 4.17):

2. Проверьте результат в браузере (рисунок 4.18):

Если проверить свойство в файле style.css, то можно увидеть, что препроцессор в процессе компиляции сам вычислил процент (рисунок 4.19):

Сверстайте макет practice.psd из папки templates.

Страница должена быть поделена на блоки header, intro, main, group, footer. Они должны быть разнесены по отдельным файлам и собираться в index.kit. Каждый из этих блоков должен быть обернут в блок container с шириной, указанной в макете. Значение цвета, размер шрифта и повторяющиеся отступы должны быть вынесены в отдельный файл с переменными. Картинки в блоке main выбираются самостоятельно. Они не должны изменять ширину отведенного для них блока.

Контрольное задание

Сделайте копию итогового задания из урока 3.

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

Все шаблоны и миксины должны быть вынесены в отдельные файлы и называться extend.scss и mixin.scss соответственно.

Ширину внутренних блоков документа (header, nav, main и т.д.) нужно вынести в файл с переменными. Ширина всего документа должны высчитываться из ширины внутренних блоков. В операции сложения нужно использовать переменные.

Контрольные вопросы.

1. Для чего нужны шаблоны?
2. Для чего нужны миксины?
3. Для чего нужна работа с математикой?
4. Какой командой используется шаблон?
5. Какой командой используется миксин?
6. Сколько свойств может быть задано в шаблоне?
7. Сколько переменных может использовать в миксине?
8. Можно ли использовать шаблон внутри миксина?
9. Можно ли применить шаблон к блокам с одинаковыми классами?
10. Посчитает ли препроцессор данное значение?