Препроцессоры CSS: SASS, SCSS — переменные, вложенность, миксины для вёрстки

Препроцессоры CSS: SASS и SCSS за 10 минут

11 марта 2026 г.

7 минут

221

Препроцессоры CSS: SASS и SCSS за 10 минут

Препроцессоры CSS — это инструменты, которые расширяют обычный CSS: переменные, вложенность селекторов, миксины, импорты. Код пишется в формате SASS или SCSS, а на выходе получается обычный CSS, который понимает браузер. Многие думают, что препроцессоры — только для опытных верстальщиков; на самом деле основы осваиваются быстро и сразу упрощают вёрстку. В статье — что такое SASS и SCSS, зачем они нужны, переменные, вложенность, миксины и импорты, примеры кода и как подключить препроцессор в проект. В начале — короткое видео, где всё это разбирают за 10 минут.

Видео: препроцессоры CSS за 10 минут

За 10 минут разберём, как SASS, SCSS и другие CSS-препроцессоры упрощают вёрстку, делают код понятнее, а работу — быстрее. Препроцессоры не только для профи: базовые приёмы доступны каждому.

[フレーム]

SASS, SCSS: переменные, вложенность, миксины — проще вёрстка и понятнее код

Что такое препроцессоры CSS

Препроцессор CSS — это программа или плагин, который принимает на вход код в расширенном синтаксисе (например, SASS или SCSS) и выдаёт на выходе обычный CSS. Браузеры выполняют только CSS; синтаксис с переменными, вложенностью и миксинами они не понимают. Поэтому препроцессор — это этап сборки: вы пишете удобный код, сборка превращает его в валидный CSS.

Популярные препроцессоры:

SASS (Syntactically Awesome Style Sheets) — один из самых распространённых; есть два варианта синтаксиса: «старый» SASS (без фигурных скобок и точек с запятой) и SCSS.
SCSS (Sassy CSS) — синтаксис SASS, максимально близкий к обычному CSS: те же {} и ;. Файлы с расширением .scss.
Less — похожие идеи (переменные, миксины, вложенность); синтаксис чуть отличается.
Stylus — более лаконичный синтаксис, меньше обязательных символов.

В практике чаще всего встречаются SASS/SCSS: хорошая документация, интеграция в сборщики (Webpack, Vite, Gulp) и в IDE.

Рис. 1 — От SCSS/SASS к CSS

Зачем нужны SASS и SCSS

Меньше повторений — цвета, отступы, шрифты задаются один раз в переменных и подставляются по имени.
Понятная структура — вложенность селекторов повторяет структуру HTML (блок → элемент → модификатор), проще читать и править.
Переиспользование — миксины и примеси позволяют вынести общие куски стилей (например, сброс списка, flex-центрирование, медиазапросы) и вызывать одной строкой.
Разбиение на файлы — стили можно держать в нескольких файлах (партиалы) и подключать через @import или @use; на выходе один или несколько CSS-бандлов.
Удобство для больших проектов — темы, дизайн-токены и сложные компоненты проще поддерживать с переменными и миксинами.

Препроцессоры не заменяют знание CSS: вы по-прежнему пишете свойства и селекторы, просто в более удобной форме. Современный CSS уже поддерживает переменные (custom properties) и вложенность (nesting в стандарте), но SASS/SCSS по-прежнему дают миксины, функции, импорты и единый синтаксис во всех браузерах без оглядки на поддержку.

SASS и SCSS: в чём разница

SCSS — синтаксис с фигурными скобками и точками с запятой. Любой валидный CSS является валидным SCSS, поэтому в существующий .css можно просто переименовать расширение в .scss и понемногу добавлять возможности препроцессора.

SASS (индоент-синтаксис) — без {} и ;, важны отступы (как в Python). Короче писать, но привычнее тем, кто уже знает SCSS или обычный CSS.

Пример одного и того же фрагмента:

SCSS:

.card {
 padding: 1rem;
 border-radius: 8px;
 &__title {
 font-size: 1.25rem;
 }
}

SASS (индоент):

.card
 padding: 1rem
 border-radius: 8px
 &__title
 font-size: 1.25rem

В статье дальше используется SCSS — он чаще встречается в проектах и проще для перехода с обычного CSS.

Переменные

Переменные позволяют один раз задать значение (цвет, размер, шрифт) и использовать его по имени. Изменение в одном месте обновляет все места, где переменная использована.

В SCSS переменные объявляются через $:

$color-primary: #2563eb;
$spacing-unit: 8px;
$font-main: "Inter", sans-serif;
.button {
 background-color: $color-primary;
 padding: $spacing-unit * 2;
 font-family: $font-main;
}

Так можно хранить палитру, отступы по сетке и типографику в начале файла или в отдельном партиале (например, _variables.scss) и подключать в основные файлы. Для темизации часто комбинируют переменные SASS с CSS custom properties (var(--color-primary)), чтобы менять тему без пересборки.

Рис. 2 — Переменные: один раз задал — используешь везде

Вложенность (nesting)

Вложенность позволяет писать селекторы внутри селекторов: структура в коде повторяет структуру разметки. Это уменьшает повторение родительского селектора и делает стили компонента собранными в одном блоке.

.card {
 padding: 1rem;
 border-radius: 8px;
 &__title {
 font-size: 1.25rem;
 margin-bottom: 0.5rem;
 }
 &__text {
 color: #64748b;
 }
 &:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
}

Символ & подставляется родительским селектором: &__title превращается в .card__title, &:hover — в .card:hover. Так удобно вести вёрстку по БЭМ или просто группировать стили блока. Не стоит вкладывать селекторы слишком глубоко (больше 3–4 уровней): скомпилированный CSS станет громоздким и специфичность вырастет.

Миксины

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

Объявление и вызов:

@mixin flex-center {
 display: flex;
 align-items: center;
 justify-content: center;
}
@mixin respond-to($breakpoint) {
 @if $breakpoint == mobile {
 @media (max-width: 767px) { @content; }
 } @else if $breakpoint == tablet {
 @media (min-width: 768px) and (max-width: 1023px) { @content; }
 }
}
.header {
 @include flex-center;
 min-height: 60px;
}
.sidebar {
 @include respond-to(mobile) {
 display: none;
 }
}

@content подставляет внутрь миксина блок кода, переданный при вызове. Так один миксин может оборачивать разные стили в один и тот же медиазапрос или другой общий код.

Рис. 3 — Миксины: переиспользование блоков стилей

Импорты и партиалы

Стили можно разбивать на несколько файлов и подключать их в основной. Файлы, которые не должны компилироваться в отдельный CSS сами по себе, в SASS принято называть партиалами и начинать имя с подчёркивания: _variables.scss, _mixins.scss. При импорте подчёркивание и расширение можно не указывать.

Пример структуры:

styles/
 main.scss ← основной файл, его компилируем в CSS
 _variables.scss
 _mixins.scss
 _base.scss
 components/
 _button.scss
 _card.scss

main.scss:

@use "variables" as *;
@use "mixins" as *;
@use "base";
@use "components/button";
@use "components/card";

@use — современный способ подключения (один раз загружается, переменные и миксины доступны через пространство имён или as *). Классический @import в SASS тоже работает, но @use и @forward предпочтительнее для новых проектов: меньше конфликтов и явнее зависимости.

Как подключить SASS в проект

Сборка вручную (CLI): установить Dart Sass или sass через npm и запускать, например: sass src/styles/main.scss dist/main.css (или с флагом --watch для автоматической перекомпиляции при изменениях).
Vite: в проекте на Vite достаточно установить sass (npm i -D sass); файлы .scss и .sass обрабатываются автоматически.
Webpack: установить sass-loader и sass, настроить правило для .scss в module.rules.
Расширения для браузера / онлайн: есть расширения и сайты, которые компилируют SCSS на лету для экспериментов; в продакшене обычно используют сборку.

После настройки вы создаёте файлы .scss, пишете в них переменные, вложенность и миксины, а в HTML подключаете уже сгенерированный .css. Если хотите пройти SASS в рамках структурированной программы вместе с адаптивной вёрсткой, Grid и автоматизацией, подойдёт курс «Профессиональная вёрстка» на Хекслете — там есть отдельный блок про препроцессор SASS, миксины и компиляцию в CSS.

Пример: до и после препроцессора

Обычный CSS (фрагмент):

.card {
 padding: 16px;
 border-radius: 8px;
 background-color: #ffffff;
 border: 1px solid #e2e8f0;
}
.card__title {
 font-size: 1.25rem;
 color: #1e293b;
 margin-bottom: 8px;
}
.card__text {
 color: #64748b;
 font-size: 0.875rem;
}
.card:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Тот же фрагмент на SCSS с переменными и вложенностью:

$color-text: #1e293b;
$color-text-muted: #64748b;
$color-border: #e2e8f0;
$radius: 8px;
$space: 8px;
.card {
 padding: $space * 2;
 border-radius: $radius;
 background-color: #fff;
 border: 1px solid $color-border;
 &__title {
 font-size: 1.25rem;
 color: $color-text;
 margin-bottom: $space;
 }
 &__text {
 color: $color-text-muted;
 font-size: 0.875rem;
 }
 &:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
}

Структура блока собрана в одном месте, цвета и отступы заданы переменными — при смене дизайна достаточно поправить значения в начале файла или в _variables.scss.

Выводы

Препроцессоры CSS (SASS, SCSS, Less и др.) расширяют CSS переменными, вложенностью, миксинами и импортами; код компилируется в обычный CSS на этапе сборки.
SCSS — синтаксис, совместимый с обычным CSS; SASS — индоент-синтаксис без {} и ;. В проектах чаще используют SCSS.
Переменные ($name: value) избавляют от повторений и упрощают смену темы и отступов.
Вложенность и & помогают группировать стили по блокам и повторять структуру HTML (в том числе по БЭМ).
Миксины (@mixin / @include) выносят повторяющиеся паттерны (flex-центр, медиазапросы, обрезка текста) в переиспользуемые блоки.
Партиалы и @use позволяют разбивать стили на файлы и подключать переменные и миксины там, где нужно.
Подключить SASS можно через CLI (Dart Sass), Vite, Webpack или другой сборщик; в HTML подключается уже сгенерированный CSS. Освоить основы препроцессора можно за короткое время — это упрощает вёрстку и поддержку кода, а не только «для профи».

Чтобы углубиться во фронтенд целиком — HTML, CSS, JavaScript и React с нуля до первой работы — можно посмотреть профессию «Фронтенд-разработчик» или каталог курсов по фронтенду на Хекслете: там есть и вёрстка, и препроцессоры, и современный стек.

Никита Вихров

4 месяца назад