Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)

• В современном фронтенде редко используют чистый CSS из-за его недостатков.  

• Препроцессоры стилей упрощают и ускоряют написание стилей.  

• В этом уроке рассмотрим, какие препроцессоры бывают, как их настроить и использовать.  

• Синтаксис селекторов неудобен для вложенных элементов.  

• Дублирование кода при использовании нескольких селекторов.  

• Проблемы с разметкой по методологии BEM.  

• Объединение селекторов через запятую.  

• Создание утилитарных классов для повторяющихся свойств.  

• Проблемы с большим количеством утилитарных классов.  

• В больших проектах сложно ориентироваться в коде стилей.  

• Желание разбивать один файл на множество для удобства.  

• Препроцессоры стилей позволяют писать код в удобном синтаксисе.  

• Популярные препроцессоры: Sass, PostCSS, LESS, Stylus.  

• В этом видео рассматривается Sass.  

• Установка Sass через npm.  

• Настройка задачи в VS Code для преобразования CSS в Sass.  

• Создание файла task.json для настройки преобразования.  

• Создание файла styles.scss и написание кода в Sass.  

• Преобразование файла в Sass через терминал.  

• Проверка преобразованного файла в VS Code.  

• Использование Prettier для автоматического преобразования CSS в Sass.  

• Программа автоматически обновляет файл с расширением .scss.  

• Настройки Prettier для удобства работы.  

• Настройки Prettier: процесс автоматизации, префиксы, минификация.  

• Программа работает автоматически при сохранении файлов.  

• Держите программу открытой для автоматического обновления файлов.  

• Установка Node.js LTS и npm.  

• Установка плагина Sass в WebStorm.  

• Создание файла styles.scss и написание кода на диалекте Sass.  

• WebStorm группирует файлы с разными расширениями.  

• Преобразование синтаксиса классических стилей.  

• Использование плагина Sass для WebStorm вместо дополнительных скриптов.  

• Sass - популярный препроцессор стилей с множеством функций.  

• Два варианта синтаксиса: классический и без скобок.  

• Предпочтение классического синтаксиса для удобства.  

• Вложенность селекторов в Sass.  

• Пример с элементами header и title.  

• Преобразование кода в классический CSS.  

• Использование амперсанда для объединения селекторов.  

• Пример с классами header и header-logo.  

• Объединение селекторов с псевдоклассами.  

• Миксины как группы свойств с вложенными селекторами.  

• Синтаксис миксинов и их использование.  

• Пример с миксином line-clamp.  

• Переменные в Sass и их использование с миксинами.  

• Пример с переменными min и max.  

• Математические операции с переменными.  

• Функции в Sass как повторно используемые блоки кода.  

• Пример функции get-size с аргументом multiplier.  

• Логика функции и возврат значения.  

• Умножение аргумента мультиплеер на восемь и соединение с единицей измерения пикселями.  

• Использование функции в качестве значения свойства с аргументом мультиплеер.  

• Пример: умножение восьми пикселей на двойку и четверку для внутреннего отступа паддинг.  

• Использование циклов для повторяющихся однотипных действий.  

• Пример: создание множества утилитарных классов для класса грид с изменяющимся числом колонок.  

• Пример кода с использованием переменной счетчика цикла ай.  

• Разбивка кода стиля на множество мелких файлов и их программная сборка в один итоговый файл.  

• Пример: корневой файл стайлс точка с с импортом других файлов.  

• Создание отдельных файлов для каждого бэм блока.  

• Использование ключевого слова импорт для включения файлов в основной файл стайлс точка с сс.  

• Пример импорта файлов нормалайз, миксинец, вейблс, ютис и глобалс.  

• Возможность использования одного импорта для всех файлов или отдельных строк для каждого файла.  

• Описание содержимого файлов нормалайз, мекси, вериблс, ютис и глобалс.  

• Пример использования миксинов и глобальных переменных.  

• Итоговый скомпилированный файл с перечислением всех импортированных стилей.  

• Компонентный подход в стилях позволяет держать код в чистоте и упрощает работу.  

• При процессор стилей обязателен для фронтенд-разработчиков.  

• Использование при процессоров, таких как Sass, делает разработчиков более ценными специалистами.