Курс SCSS и CSS-препроцессоров
Приведите стили проекта в порядок с помощью переменных, вложенности и переиспользуемых правил SCSS.
О курсе
По мере роста сайта таблицы стилей становятся трудными для поддержки. SCSS помогает разделить их на понятные части, переиспользовать правила и собирать итоговый CSS без дублирования.
Чему научитесь
- Переменные, вложенность и разбиение кода на файлы.
- Миксины, функции и общие правила для компонентов.
- Именование и организация файлов по блокам интерфейса.
- Компиляция SCSS, проверка результата и знакомство с Less.
Программа обучения
Для каждого раздела указан ориентировочный объём в парах. Одна пара — два академических часа. Состав и темп занятий можно уточнить под вашу цель и подготовку.
Синтаксис SCSS1 пара
- Переменные, вложенность и разбиение кода на файлы.
- Переменные цветов, размеров и типографики
- Вложенные селекторы без лишней специфичности
- Подключение частичных файлов в единую структуру
Повторное использование2 пары
- Миксины, функции и общие правила для компонентов.
- Миксин для повторяющегося правила
- Параметры миксинов и простые функции
- Выбор между переменной, миксином и обычным CSS
Архитектура стилей2 пары
- Именование и организация файлов по блокам интерфейса.
- Разделение базовых стилей, компонентов и страниц
- Правила именования классов для поддержки проекта
- Поиск и устранение дублирующихся объявлений
Сборка1 пара
- Компиляция SCSS, проверка результата и знакомство с Less.
- Компиляция SCSS в CSS и карты исходников
- Проверка итоговых стилей в браузере
- Сравнение основных возможностей SCSS и Less
Практическая работа и результат
Организуете стили многостраничного проекта и собираете их в обычный CSS.
В процессе вы применяете темы программы к одной задаче, проверяете результат и исправляете ошибки вместе с преподавателем. Так после занятий у вас остаётся законченная учебная работа, а не только записи с объяснениями.
С чего начать
Нужны уверенные основы CSS. Если часть тем уже знакома, программу можно сместить в сторону более сложной практики.
Продолжить обучение
Эта тема входит в программу «Frontend-разработчик». Если вам нужно освоить направление целиком, обсудите с менеджером полную программу или отдельные занятия по этой теме.
Как проходят занятия
Аудитории, оборудование и практика — как это выглядит изнутри.
