Введение в Sass 0:00 Sass — это препроцессор для CSS, который расширяет его возможности. В этом выпуске мы познакомимся с переменными, миксинами, шаблонами и вложенностью. Создан новый проект с папкой «src» и файлом «style.css».
Преобразование файлов 0:57 Файлы Sass не понятны браузеру, поэтому их нужно перекодировать в CSS. Для этого используется программа-сборщик и компилятор Prepros. Prepros обрабатывает файл «style.css» и выводит результат в файл «style.css», который будет обрабатываться браузером.
Синтаксис Sass 1:46 Синтаксис Sass отличается от CSS: нет фигурных скобок и точки с запятой, каждый параметр начинается с новой строки. Отступы формируют вложенность. Пример использования: создание класса «блок» и применение стилей без точки с запятой.
Новый синтаксис CSS-like 3:43 Разработан новый синтаксис, более похожий на CSS: есть фигурные скобки и точка с запятой. Переход на Sass стал проще благодаря новому синтаксису.
Вложенность в Sass 4:39 Вложенность позволяет писать правила CSS внутри других правил. Пример: выделение слова «фрилансер» зелёным цветом внутри класса «блок». Результат: слово «фрилансер» выделено зелёным цветом.
Сложная иерархия блоков 6:47 Создание блока с классом «блок-текст» и изменение свойств шрифта. Обращение к селектору класса «блок-текст» внутри класса «блок».
Операторы в Sass 8:35 Использование оператора «>» для обращения к селекторам первого уровня вложенности. Пример: окрашивание текста только первого уровня параграфов в красный цвет.
Оператор «end» 9:58 Оператор «end» заменяет родителя, что ускоряет работу. Пример с псевдоклассом «hover»: изменение цвета ссылки при наведении. Оператор «end» также полезен при наличии нескольких классов для одного тега.
Использование оператора «энд» 12:54 Добавление класса «блок биг» к элементу с классом «блок». Применение оператора «энд» для обращения к классу родителя. Изменение размера шрифта внутри класса «блок».
Работа со ссылками 13:54 Ссылка с классом «линк» может быть внутри или вне класса «блок». Задание параметров для всех ссылок с классом «линк». Изменение размера шрифта ссылки внутри класса «блок» с помощью оператора «энд».
Переменные в Sass 16:11 Создание переменной с помощью знака доллара и имени на латинице. Использование переменной в правилах для изменения размера шрифта. Изменение значения переменной для применения изменений по всему файлу стилей.
Импорт файлов стилей 18:02 Вынесение редко редактируемого стиля в отдельный файл. Подключение файла стилей с помощью команды «импорт». Экономия места и удобство работы с несколькими файлами стилей.
Шаблоны в Sass 22:42 Создание шаблона для ссылок с пунктирной границей. Применение шаблона к ссылкам с помощью команды «экстенд слово». Автоматическое добавление стиля из шаблона к ссылкам.
Применение шаблонов 24:44 Подключение шаблона к классу «линк». Возможность изменения значений шаблона для применения к разным ссылкам. Базовое подключение шаблона к классу «линк» в файле стилей.
Подключение стилей через шаблон 25:42 Сначала подключаются стили из шаблона, затем прописываются индивидуальные стили. Базовый стиль применяется ко всем ссылкам, но его можно изменить, переписав свойства. Пример применения шаблона: добавление красной границы к классу «линк».
Порядок подключения стилей 26:43 Шаблон применяется к нескольким классам через запятую. Перемещение шаблона ниже оригинальных записей приводит к перезаписи стилей. Шаблон не выводится в CSS-файл, если не используется.
Подключение шаблонов через класс 27:43 Создание класса в CSS-файле для подключения шаблона. Класс с параметрами выводится в CSS-файл. Пример использования: создание шаблона для ссылок с иконками.
Миксины в Sass 29:20 Миксины позволяют создавать сложные стили с переменными. Создание миксина: использование «миксин» и указание имени. Подключение миксина с переменной: использование «инклуд» и указание значения.
Математические операторы в Sass 32:59 Sass вычисляет процентные значения на основе входных данных. Пример вычисления: деление размера блока на ширину контентной части. Результат: ширина блока в процентах от родителя.
Комментарии в Sass 34:50 Комментарии в CSS: использование «/\*» и «*/». Внутренние комментарии в Sass: использование двух слэшей «//». Комментарии помогают структурировать стили и избежать путаницы.
Заключение 37:00 Упоминание о логических операторах в Sass. Рекомендация изучить Sass на официальном сайте. Задание: создать макеты с использованием изученных методов.
