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

Иногда проект состоит из множества страниц, которые включают в себя множество блоков. Чаще всего на разных страницах будут разные стили, однако могут быть блоки, которые повторяются из страницы в страницу. Если для страницы определена своя таблица стилей, то для того, чтобы повторить какой-то блок, который есть на другой странице придется дублировать код. Препроцессор SASS позволяет избежать дублирования кода с помощью команды import.

Команда import подключает стиль из стороннего scss файла, а компилятор соединяет это в единую таблицу стилей.

1. Добавьте к существующему файлу index.html следующий код (рисунок 3.5):

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

3. Теперь пропишем стили для заголовков в файле headers.scss (рисунок 3.7):

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

Подключается файл следующей конструкцией:

@import “имя файла”;

Пример (рисунок 3.8):

Теперь, если сохранить файл style.scss можно заметить, что стили из файла header.scss применились к заголовкам (рисунок 3.9):

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

Как видно, компилятор объединил scss файлы в единой таблице стилей.

Переменные

Уникальной возможностью препроцессоров для css является использование переменных. Они позволяют выносить повторяющиеся постоянные значения. Рассмотрим на примере.

1. Добавьте файл variables.scss в файл style.scss (рисунок 3.11):

Добавлять файл с переменными лучше всего в самом начале основного файла стилей.

Объявление переменных делается через следующую конструкцию:

Например:

$main_color: #fff;

2. В файле variables.scss задайте следующие переменные (рисунок 3.12):

Чтобы подставить значение переменной используется конструкция:

3. Подставьте созданные переменные как показано на рисунках 3.13 и 3.14:

4. Попробуйте изменить значение какой-либо переменной и пронаблюдайте результат в браузере.

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

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

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

Создайте на всех страницах общие элементы (если их нет): заголовок, текст на плашке (т.е. текст на фоне), изображение, список, ссылку на любой внешний ресурс. Используйте при этом принципы методологии БЭМ.

Задайте вновь созданным элементам стили через переменные, которые должны быть в отдельном файле и импортироваться в общий файл style.scss:

• цвет заголовка;
• цвет плашки;
• цвет текста на плашке;
• изменение прозрачности изображения при наведении мыши на изображение;
• маркер списка в виде миниатюры (подобрать самостоятельно);
• цвет ссылки на внешний ресурс;
• увеличенный размер шрифта ссылки и цвет;
• цвет при наведении мыши на ссылку.

Таким образом у Вас должно быть не менее 8 переменных, созданных в отдельном файле.

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

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