SCSS для мидл-разработчика: от синтаксиса до архитектуры

SCSS (Sassy CSS) — это один из двух синтаксисов препроцессора Sass, полностью совместимый с обычным CSS. Для разработчика уровня middle недостаточно знать вложенность и переменные: важно понимать компиляцию, организацию кода, работу с миксинами, функциями и модульной архитектурой. Эта статья поможет систематизировать знания и закрыть пробелы, которые часто всплывают на код-ревью и технических интервью.

Чем SCSS отличается от Sass и Less

Многие путают SCSS и Sass, считая их синонимами, но это разные синтаксисы одного препроцессора. Sass использует отступы вместо фигурных скобок и не требует точек с запятой, тогда как SCSS — это надмножество CSS: любой валидный CSS-файл является валидным SCSS-файлом. Именно поэтому SCSS стал де-факто стандартом в современных проектах.

Отличия от Less принципиальнее: Sass реализован на Ruby (и Dart Sass для современной компиляции), имеет более мощную систему функций и модулей, а также строгую типизацию значений. Less ближе к CSS по поведению переменных и не предоставляет такой гибкости в работе с коллекциями и миксинами.

Базовый синтаксис, который должен быть доведён до автоматизма

Переменные и область видимости

Переменные объявляются через $ и имеют лексическую область видимости. Внутри блока переменная, объявленная заново, не перезаписывает внешнюю, если не использовать флаг !global.

• Локальные переменные видны только внутри блока, где объявлены.
• Глобальные переменные объявляются на верхнем уровне файла.
• !default позволяет задать значение по умолчанию, которое можно переопределить до импорта.

Вложенность и селектор родителя

Вложенность — главная причина проблем с производительностью CSS у начинающих. Мидл-разработчик должен осознанно ограничивать глубину вложенности тремя уровнями и использовать амперсанд & для генерации составных селекторов.

1. Избегайте вложенности ради краткости — она увеличивает специфичность.
2. Применяйте & для псевдоклассов, псевдоэлементов и модификаторов БЭМ.
3. Помните, что & подставляет весь составной селектор, а не только последний элемент.

Партиалы, импорт и модули

Файлы с префиксом _ называются партиалами и не компилируются в отдельные CSS. Исторически использовался @import, но он устарел: сегодня применяется @use и @forward, которые изолируют пространства имён и предотвращают дублирование кода.

• @use подключает модуль с собственным неймспейсом.
• @forward реэкспортирует члены модуля для внешнего использования.
• @import оставлен для обратной совместимости, но в новых проектах не применяется.

Миксины, функции и плейсхолдеры

Миксины

Миксин — это блок стилей, который можно переиспользовать через @include. В отличие от плейсхолдеров, миксины копируют код в каждое место вызова, поэтому злоупотребление ими раздувает CSS.

Миксины стоит применять для параметризуемых конструкций: медиазапросов, генерации сеток, вендорных префиксов. Если стили не принимают аргументов и не зависят от контекста — лучше использовать плейсхолдер %name и @extend.

Функции

Встроенные функции Sass (map-get, nth, lighten, mix) покрывают большинство задач. Начиная с Dart Sass многие цветовые функции помечены как устаревшие — им на смену пришли модульные аналоги, например color.adjust и color.scale.

Пользовательские функции объявляются через @function и обязательно возвращают значение через @return. Их удобно использовать для вычислений на основе карт конфигурации.

Плейсхолдеры и @extend

Плейсхолдеры не попадают в итоговый CSS, если не были расширены. @extend объединяет селекторы в один список, что уменьшает размер файла, но может непредсказуемо влиять на каскад. Используйте их точечно — например, для базовых классов кнопок или типографики.

Структура проекта и архитектура

Классический подход — паттерн 7-1: семь директорий (abstracts, base, components, layout, pages, themes, vendors) и один корневой файл main.scss. Такая структура предсказуема для команды и упрощает онбординг новых разработчиков.

1. Abstracts — переменные, миксины, функции, плейсхолдеры.
2. Base — сброс стилей, типографика, базовые теги.
3. Components — независимые UI-блоки: кнопки, карточки, формы.
4. Layout — каркас страницы: хедер, футер, сайдбар, сетка.
5. Pages — стили, специфичные для конкретных страниц.
6. Themes — цветовые схемы и темы оформления.
7. Vendors — сторонние библиотеки и их переопределения.

Для мидла важно не просто знать структуру, а уметь обосновать её выбор: где заканчивается компонент и начинается лейаут, как избежать циклических зависимостей между партиалами, почему @use предпочтительнее глобальных переменных.

Типичные ошибки и как их избежать

• Глубокая вложенность — приводит к раздутой специфичности и конфликтам.
• Использование @import — дублирует CSS и замедляет сборку.
• Миксины вместо плейсхолдеров — лишний объём итогового файла.
• Глобальные переменные без !default — усложняют переопределение в темах.
• Игнорирование source maps — затрудняет отладку в браузере.

Отдельно стоит упомянуть производительность: современные