CSS-препроцессоры — это инструменты, которые расширяют возможности стандартного CSS, добавляя переменные, вложенность, миксины и функции. Препроцессоры компилируются в обычный CSS перед отправкой в браузер.
⚙️CSS-препроцессоры
Sass/SCSS, Less: переменные, миксины, вложенность, модули. PostCSS.
📖8 мин чтения📊Уровень 8📅19 февраля 2026 г.
🗺️ Mind Map
Загрузка карты...
Что такое CSS-препроцессоры и зачем они нужны
CSS-препроцессоры появились для решения ограничений стандартного CSS: отсутствия переменных, невозможности повторного использования кода, сложности поддержки больших проектов. Они добавляют программные возможности в стили.
Основные преимущества препроцессоров: переменные для цветов и размеров (уменьшают дублирование на 40-60%), вложенность селекторов (структура соответствует HTML), миксины для повторного использования кода (сокращают время разработки на 30%), математические операции и функции.
Препроцессоры используют 87% веб-разработчиков (опрос State of CSS 2023). Они стали стандартом в профессиональной разработке.
Sass/SCSS: самый популярный препроцессор
Sass (Syntactically Awesome Style Sheets) — первый и самый популярный CSS-препроцессор. Создан в 2006 году Хэмптоном Кэтлином. Имеет два синтаксиса: Sass (отступы) и SCSS (фигурные скобки, синтаксис ближе к CSS).
Ключевые возможности Sass:
Переменные хранят значения для повторного использования. Синтаксис: $primary-color: #3498db;. В коде используется как color: $primary-color;.
Вложенность отражает структуру HTML. Вместо .nav .nav-item .nav-link пишем вложенные блоки: .nav { .nav-item { .nav-link {} }}.
Миксины — переиспользуемые блоки стилей с параметрами. Определение: @mixin button($bg) { background: $bg; padding: 10px; }. Использование: @include button(#3498db);
Наследование через @extend позволяет наследовать стили одного селектора другим. Сокращает размер итогового CSS на 15-25%.
Sass доступен в трёх реализациях: LibSass (C++, устаревший), Ruby Sass (оригинал, прекращён в 2019), Dart Sass (официальная реализация с 2016, активно развивается).
Less: простая альтернатива
Less — препроцессор, созданный Алексисом Селье в 2009 году. Синтаксис максимально близок к CSS, порог входа ниже, чем у Sass. Написан на JavaScript, работает в Node.js и браузере.
Особенности Less: переменные через @ вместо $ (@primary-color: #3498db;), миксины без директивы (любой класс может быть миксином), математические операции встроены (width: 100% / 3;), функции для работы с цветом (darken(@color, 10%);).
Less популярен в экосистеме Bootstrap (до версии 4 использовал Less, с версии 4 перешёл на Sass). Подходит для небольших проектов и быстрого прототипирования.
PostCSS: модульная обработка стилей
PostCSS — инструмент для трансформации CSS с помощью JavaScript-плагинов. Создан Андреем Ситником в 2013 году. В отличие от Sass и Less, это не препроцессор в классическом смысле — это платформа для обработки CSS.
Принцип работы PostCSS: парсит CSS в AST (абстрактное синтаксическое дерево), применяет плагины для трансформаций, генерирует итоговый CSS. Каждый плагин выполняет одну задачу.
Популярные плагины:
Autoprefixer — добавляет вендорные префиксы автоматически. Вы пишете display: flex;, на выходе display: -webkit-box; display: flex;. Используется в 94% проектов.
cssnano — минификация CSS. Удаляет пробелы, комментарии, оптимизирует значения. Сокращает размер на 20-40%.
postcss-preset-env — позволяет использовать современные CSS-функции (custom properties, nesting) с компиляцией в старый синтаксис для поддержки браузеров.
PostCSS часто используют вместе с Sass: Sass компилирует препроцессорный синтаксис, PostCSS добавляет префиксы и оптимизирует.
Сравнение препроцессоров
Выбор препроцессора зависит от задач проекта. Sass — стандарт индустрии, максимум возможностей, большое комьюнити. Less — простота, низкий порог входа, подходит для небольших проектов. PostCSS — гибкость, модульность, можно комбинировать с любым препроцессором.
Скорость компиляции: Dart Sass компилирует 100 000 строк за 2-3 секунды, LibSass (устаревший) — за 1-1.5 секунды, Less — за 1.5-2 секунды, PostCSS зависит от плагинов (обычно 0.5-1 секунда).
Поддержка экосистемы: Sass имеет плагины для всех популярных сборщиков (Webpack, Vite, Parcel, Gulp), библиотеки UI-компонентов (Material-UI, Bootstrap 5), фреймворки (Angular, Vue).
Практическое применение
Установка Sass: через npm — npm install -g sass, компиляция — sass input.scss output.css, watch-режим — sass --watch input.scss:output.css.
Интеграция в проекты: в Webpack через sass-loader, в Vite встроенная поддержка (достаточно импортировать .scss файл), в Create React App поддержка из коробки.
Структура файлов: разделение на модули (partials) — файлы начинаются с подчёркивания (_variables.scss, _mixins.scss), главный файл импортирует модули через @use или @import, итоговый CSS собирается в один файл.
Best practices: использовать переменные для цветов, размеров, breakpoints, группировать миксины по назначению (typography, layout, utilities), избегать глубокой вложенности (максимум 3-4 уровня), использовать @use вместо устаревшего @import (с Dart Sass 2019).
Препроцессоры — обязательный инструмент современной веб-разработки. Они ускоряют разработку, улучшают поддерживаемость кода, снижают количество ошибок.
Как это работает
Препроцессор читает исходные файлы (.scss, .less), парсит синтаксис (переменные, вложенность, миксины), трансформирует в стандартный CSS, записывает результат в .css файл. Браузер получает обычный CSS.
Алгоритм
- 1Установка препроцессора
Установка через npm: `npm install -g sass` или `npm install -g less`. Для PostCSS: `npm install postcss postcss-cli autoprefixer`.
- 2Создание исходного файла
Создать файл styles.scss или styles.less. Использовать переменные, вложенность, миксины.
- 3Компиляция
Запустить компилятор: `sass styles.scss styles.css` или `lessc styles.less styles.css`. Для watch-режима: `sass --watch styles.scss:styles.css`.
- 4Подключение к HTML
Подключить скомпилированный CSS: `<link rel="stylesheet" href="styles.css">`. Браузер работает только с CSS, не видит препроцессор.
- 5Интеграция в сборщик (опционально)
Настроить Webpack (sass-loader), Vite (встроенная поддержка) или Gulp для автоматической компиляции при изменении файлов.
Вход
Исходные файлы препроцессора (.scss, .less) с переменными, вложенностью, миксинами
Выход
Скомпилированный CSS-файл (.css), совместимый со всеми браузерами
Распространённые ошибки
- ✗
Слишком глубокая вложенность (более 4 уровней) — увеличивает специфичность, усложняет переопределение стилей
- ✗
Использование @import вместо @use в Sass — @import устарел с 2019 года, @use безопаснее и быстрее
- ✗
Забыть настроить watch-режим — приходится компилировать вручную после каждого изменения
- ✗
Не использовать переменные для повторяющихся значений — теряется главное преимущество препроцессоров
- ✗
Компилировать препроцессор на клиенте (в браузере) — замедляет загрузку, всегда компилируйте на сервере
Примеры
Пример Sass переменных и вложенности: $primary: #3498db; $spacing: 16px; .button { background: $primary; padding: $spacing; &:hover { background: darken($primary, 10%); } &--large { padding: $spacing * 2; } } Пример миксина для адаптивности: @mixin respond-to($breakpoint) { @if $breakpoint == mobile { @media (max-width: 767px) { @content; } } } .container { width: 1200px; @include respond-to(mobile) { width: 100%; } }
Информация об изображении
Статус
Требуется:Нет
Обработка:Не требуется
Сравнение CSS-препроцессоров
| Характеристика | Sass | Less | PostCSS |
|---|---|---|---|
| Язык реализации | Dart (ранее Ruby) | JavaScript | JavaScript |
| Синтаксис переменных | $var: value; | @var: value; | --var: value; (CSS Custom Properties) |
| Вложенность | Да | Да | Через плагин (postcss-nested) |
| Миксины | @mixin, @include | Любой класс | Через плагин |
| Популярность (npm downloads/неделя) | 7.5 млн | 1.2 млн | 28 млн (как платформа) |
| Скорость компиляции (100K строк) | 2-3 сек | 1.5-2 сек | 0.5-1 сек (зависит от плагинов) |
Сравнительная таблица: анализ различий
Основные возможности препроцессоров
| Возможность | Описание | Преимущество |
|---|---|---|
| Переменные | Хранение повторяющихся значений (цвета, размеры, шрифты) | Уменьшение дублирования на 40-60%, упрощение изменений |
| Вложенность | Структура селекторов отражает HTML-иерархию | Читаемость, структурированность кода |
| Миксины | Переиспользуемые блоки стилей с параметрами | Сокращение времени разработки на 30% |
| Математические операции | Вычисления в CSS: width: 100% / 3; | Динамические значения без calc() |
| Функции для цвета | darken(), lighten(), mix() и др. | Генерация палитр, hover-эффекты |
| Импорты и модули | Разделение кода на файлы, @use/@import | Организация больших проектов |
Классификационная таблица: виды и типы
Популярность CSS-препроцессоров (npm downloads, млн/неделя)
4 личности
❓Часто задаваемые вопросы
Да, обязательно. Препроцессоры расширяют CSS, но не заменяют его. Нужно понимать селекторы, специфичность, каскад, flexbox, grid. Препроцессоры изучаются за 1-2 дня после освоения CSS.