Шаблоны, препроцессоры, jQuery

Автор учебного курса: Медведский Максим Константинович, студент гр. ИТб-401 ФГАОУ ВО «РГППУ.

Скачать Notepad++ Portable
Скачать Sublime Text 3 Portable
Скачать материалы к учебному курсу - папка kurs_prepros.zip (2,5 Мб)

Урок 2. Препроцессор SASS, вложенность

Цель: ознакомиться с особенностями SASS и создать стиль для сайта.

Задачи:

ознакомиться с синтаксисом SCSS;
научиться применять стили через SASS;
научиться использовать вложенность.

В результате выполнения урока получится следующая веб-страница (рисунок 2.1):

Подготовка к работе

Скопируем папку project, созданную в предыдущем уроке, переименуем ее в project2 (рисунок 2.2), затем удалим внутри папку html_blocks:

Проект будет реализовываться в следующих программных средствах:

Sublime Text 3;
Prepros.

1. Запустите программу Sublime Text 3. В левом верхнем углу выберите File – Open Folder… (рисунок 2.3)

2. Найдите через проводник ранее созданную папку project2, нажмите Выбор папки.

3. Слева появится панель Folders:

4. Создайте следующие файлы:

• В папке scss файл style.scss (рисунок 2.4):

5. Удостоверьтесь, что файлы появились в проводнике Sublime Text (рисунок 2.5)

6. Запустите программу Prepros. Посередине нажмите кнопку browse и найдите через проводник ранее созданную папку project2, нажмите Add Project (рисунок 2.6):

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

Что такое препроцессор, его использование, синтаксис

Препроцессор значительно расширяют возможности стандартных таблиц стилей (CSS) и делает работу значительно быстрее. Возможности шаблонизации, обращение к блокам по иерархии и использование переменных позволяют легче редактировать проект. Использование препроцессоров дает возможность легко масштабировать проект и отслеживать изменения в нем.

Стандартный синтаксис препроцессора SASS определяет область видимости по отступам, а разделение свойств по переносу строки. Пример (рисунок 2.7):

Однако, такой синтаксис неудобен и мало похож на привычный синтаксис CSS. Поэтому разработчики SASS создали синтаксис на основе CSS, который называется SCSS. Пример (рисунок 2.8):

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

Вложенность

Одной из самых важных особенностей препроцессора SASS является вложенность. Она позволяет систематизировать обращение к блокам, объединяя их под одним селектором.

1. Откройте файл index.kit, созданный ранее, удалите всё, находящееся в блоке body (рисунок 2.9):

2. Внутри тега body создайте блок с классом main. Внутри этого блока создайте другие вложенные блоки. При наименовании классов используйте методологию БЭМ. Пример (рисунок 2.10):

3. Выделите блок с классом main, нажмите сочетание клавиш CTRL + ` (ё), вставьте в файл style.scss. Вы увидите следующие селекторы (рисунок 2.11):

Препроцессор sass позволяет встраивать селекторы друг в друга. Вместо символа & он подставляет родительский селектор, в данном случае – main.

4. Напишите несколько свойств (рисунок 2.12), сохраните index.html и style.scss сочетанием клавиш CTRL + s, либо через File – Save. Откройте программу Prepros и запустите Live preview сочетанием клавиш CTRL + L. Откроется окно браузера. Проверьте результат (рисунок 2.13).

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

Программа Prepros скомпилировала наш файл scss в привычный css.

Допускается обращение по вложенности к любым элементам внутри основного блока.

5. В файле style.scss создайте свойство селектора по типу блока. Пример (рисунок 2.15):

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

Видно, что стиль применился к вложенным блокам ссылок (a). Запись «& a» в синтаксисе SCSS равнозначна записи «.main a» в привычном синтаксисе CSS.

Вложенность SASS также позволяет обращаться к псевдоэлементам.

7. Создайте вложенность с использованием псевдоэлемента hover. Пример (рисунок 2.17):

8. Проверьте результат в браузере:

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

Наполнить страницу из первого урока.

1. Сделать копию контрольного файла по своему варианту из первого урока.

2. Подобрать материал по теме сайта по варианту - тексты и изображения.

3. Наполнить блочную структуру из первого урокасобранным контентом. В процессе верстки при необходимости можно изменить размеры блоков.

4. Внутри каждого блока должно быть не менее двух уровней вложенности div. Применять методологию БЭМ: блоки и элементы. Применить несколько псевдоклассов к разным элементам.

5. Свойства блоков писать в файле style.scss, из которого будет компилироваться файл css.

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

Темы сайта

1. Магазин мебели.

2. Магазин электроники.

3. Ремонт холодильников.

4. Магазин канцелярских товаров.

5. Сайт школы.

6. Сайт университета.

7. Магазин запчастей автомобилей.

8. Ремонт компьютеров.

9. Сайт типографии.

10. Магазин одежды.

11. Форум программистов.

12. Сайт детского сада.

13. Форум садоводов.

14. Сайт аптеки.

15. Ремонт телевизоров.

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

Что такое вложенность?
Какую вложенность допускает SASS?
В чем отличие SASS от SCSS?
Можно ли вставлять селекторы друг в друга?
Что подставляет компилятор вместо знака &?
Как файлы SCSS преобразуются в CSS?
Допустима ли данная конструкция?
Что является родительским блоком для блока &__item?
Как обратиться к псевдоэлементу hover родительского класса?
Для чего нужна вложенность?