/
Блог Хекслета
/
Код
/

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

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

11 марта 2026 г.
7 минут
Препроцессоры 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.

SCSS/SASS компилируются в CSS Как работает препроцессор .scss / .sass переменные, вложенность Сборка (компиляция) sass, webpack, vite .css обычный CSS Браузер получает только CSS

Рис. 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)), чтобы менять тему без пересборки.

Один раз задал — используешь везде Переменные в SASS/SCSS $color-primary: #2563eb $spacing: 8px задаём один раз .button .card, .header… используем по имени везде

Рис. 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 подставляет внутрь миксина блок кода, переданный при вызове. Так один миксин может оборачивать разные стили в один и тот же медиазапрос или другой общий код.

Миксин — один блок, много использований Миксины @mixin flex-center display: flex; align-items: center… один раз описали .header .modal .card @include flex-center — подставляем в нужных местах

Рис. 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 с нуля до первой работы — можно посмотреть профессию «Фронтенд-разработчик» или каталог курсов по фронтенду на Хекслете: там есть и вёрстка, и препроцессоры, и современный стек.

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

2 часа назад

0

Читайте также:

Категории