SASS и SCSS: в чём разница и как начать использовать

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

Содержание

• SASS и SCSS: одно семейство, два синтаксиса
• В чём разница между SASS и SCSS — наглядно
• Плюсы и минусы SCSS и SASS
• Краткая история: от SASS к SCSS
• Когда выбирать SASS, когда SCSS
• Как начать использовать SASS/SCSS: установка и первый файл
• Компиляция в проект: CLI, Vite, Webpack
• Структура проекта: партиалы и главный файл
• Полный пример: карточка в SCSS и SASS с миксином
• Конвертация: из CSS в SCSS и между синтаксисами
• Связь с другими темами: переменные, миксины, вложенность
• Типичные ошибки при переходе на SASS/SCSS
• Частые вопросы
• Читайте также
• Выводы и куда двигаться дальше

SASS и SCSS: одно семейство, два синтаксиса

SASS (Syntactically Awesome Style Sheets) — это и название препроцессора в целом, и название одного из двух его синтаксисов. SCSS (Sassy CSS) — второй синтаксис, максимально похожий на обычный CSS. Оба обрабатываются одним движком (сейчас это Dart Sass); на выходе в обоих случаях получается один и тот же валидный CSS. То есть разница SASS и SCSS — не в возможностях (переменные, миксины, вложенность, импорты есть в обоих), а только в оформлении кода.

Итог: если вы видите в проекте и .sass, и .scss — это один препроцессор, просто разное оформление. Подробнее, зачем вообще нужны препроцессоры и как устроены переменные, миксины и вложенность, — в материале «Препроцессоры CSS: SASS и SCSS за 10 минут».

В чём разница между SASS и SCSS — наглядно

Кратко: SCSS выглядит как обычный CSS — фигурные скобки {}, точки с запятой ; после свойств. SASS (его ещё называют индоент-синтаксисом) обходится без скобок и точек с запятой; структура задаётся отступами (пробелы или табы), как в Python или YAML.

Один и тот же фрагмент стилей в двух вариантах:

SCSS (файл .scss):

$color-primary: #2563eb;

.card {
  padding: 1rem;
  border-radius: 8px;
  background: $color-primary;

  &__title {
    font-size: 1.25rem;
  }
}

SASS (файл .sass):

$color-primary: #2563eb

.card
  padding: 1rem
  border-radius: 8px
  background: $color-primary

  &__title
    font-size: 1.25rem

Обратите внимание: в SASS после значения свойства не ставится ;, блоки не оборачиваются в {} — уровень вложенности задаётся отступом. Символ & (родительский селектор) и переменные $ работают одинаково в обоих синтаксисах.

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

Плюсы и минусы SCSS и SASS

Чтобы выбор между синтаксисами был осознанным, полезно держать в голове сильные и слабые стороны каждого.

В реальных проектах и на курсах вроде «Профессиональная вёрстка» почти везде используют SCSS — проще онбординг и меньше подводных камней при работе в команде.

Краткая история: от SASS к SCSS

Изначально препроцессор назывался Haml-стиль: синтаксис без скобок и с отступами (то, что сейчас зовётся SASS). Он был создан в середине 2000-х. Позже появился SCSS — «CSS-подобный» синтаксис, чтобы снизить порог входа: любой существующий CSS-файл можно было подключить в экосистему SASS, просто сменив расширение. С тех пор оба синтаксиса поддерживаются; движок сначала был на Ruby, затем появилась реализация на C (LibSass), а сейчас эталонная реализация — Dart Sass (на Dart), она рекомендуется к использованию и поддерживает все актуальные возможности.

Понимание истории помогает не путаться: «SASS» в разговоре часто означает всю экосистему (и препроцессор, и синтаксис с отступами). «SCSS» — всегда про синтаксис со скобками и файлы .scss.

Когда выбирать SASS, когда SCSS

• Выбирайте SCSS, если:
  • переходите с обычного CSS — можно подключать старые файлы, переименовав их в .scss;
  • в команде или в проекте уже пишут на SCSS (так чаще всего);
  • хотите, чтобы код выглядел привычно для любого верстальщика, знающего CSS;
  • используете туториалы и примеры из интернета — большинство из них в формате SCSS.
• Выбирайте SASS (индоент), если:
  • вам нравится лаконичный вид без {} и ; и вы готовы следить за отступами;
  • в проекте исторически пишут именно в .sass (например, в некоторых старых стеках или командах).

В 90% случаев в новых проектах и в учебных материалах используется SCSS. На Хекслете в курсе «Профессиональная вёрстка» тоже разбирают именно SCSS — переменные, миксины, вложенность и сборку. Поэтому как начать использовать SASS на практике чаще всего означает: начать с SCSS.

Как начать использовать SASS/SCSS: установка и первый файл

Чтобы начать использовать SASS или SCSS, нужны две вещи: установленный компилятор и исходные файлы (.scss или .sass), которые он превратит в .css. Браузер по-прежнему получает только CSS; препроцессор работает на этапе сборки (на вашем компьютере или на сервере сборки).

Установка Dart Sass (CLI)

Самый простой способ для экспериментов — поставить Dart Sass через npm (нужен Node.js):

npm install -g sass

Проверка:

sass --version

Если используете проект на npm без глобальной установки:

npm install -D sass

Дальше в package.json можно добавить скрипт, например:

"scripts": {
  "build:css": "sass src/styles/main.scss dist/main.css",
  "watch:css": "sass --watch src/styles/main.scss dist/main.css"
}

Тогда npm run build:css соберёт CSS один раз, а npm run watch:css будет пересобирать его при каждом изменении файлов.

Полезные флаги CLI:

• --watch — следить за изменениями и пересобирать автоматически.
• --style compressed — минифицированный CSS для продакшена.
• --source-map — генерация source map, чтобы в DevTools видеть исходные .scss-файлы.

Пример одной командой с картой и минификацией:

sass --watch src/styles/main.scss dist/main.css --style compressed --source-map

Первый файл: от .scss к .css

1. Создайте папку для стилей, например src/styles/.
2. Создайте файл main.scss:

$color-primary: #2563eb;

body {
  font-family: system-ui, sans-serif;
  color: #1e293b;
}

.button {
  background-color: $color-primary;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

3. Запустите компиляцию (если установили sass глобально):

sass src/styles/main.scss dist/main.css

В папке dist/ появится main.css с уже подставленным значением переменной — его и подключайте в HTML через <link rel="stylesheet" href="dist/main.css">. Так вы начали использовать SCSS: один раз настроили, дальше пишете в .scss, а в проект отдаёте .css. Подробнее про переменные, миксины и структуру файлов — в статье «Препроцессоры CSS: переменные, вложенность, миксины».

Компиляция в проект: CLI, Vite, Webpack

• Только SASS (CLI): как выше — sass в терминале или через npm-скрипт. Удобно для статичных сайтов или когда сборка простая.
• Vite: в проекте на Vite достаточно установить sass (npm i -D sass). Импорты вида import './styles/main.scss' в JS или ссылка на .scss в entry-point обрабатываются автоматически; отдельно настраивать ничего не нужно. Идеально для современных фронтенд-проектов.
• Webpack: нужны sass-loader и sass. В конфиге добавляется правило для .scss (и при необходимости для .sass); сборщик при сборке вызовет компилятор и подставит результат в бандл. Подробности настройки есть в курсе «Профессиональная вёрстка» на Хекслете — там разбирают и сборку, и структуру стилей.

Если вы только начинаете фронтенд, логичный путь: основы HTML и CSS → затем препроцессоры и адаптивная вёрстка в «Профессиональная вёрстка» → при необходимости профессия «Фронтенд-разработчик» для полного стека с JavaScript и фреймворками.

Структура проекта: партиалы и главный файл

Когда стилей становится много, их разбивают на файлы. В SASS/SCSS файлы, которые не компилируются сами по себе, принято называть партиалами и начинать имя с подчёркивания: _variables.scss, _mixins.scss, _base.scss. В главном файле их подключают через @use или @import; подчёркивание при импорте можно не писать.

Пример структуры папок:

main.scss:

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

В _variables.scss задают, например, $color-primary, $spacing-unit; в _mixins.scss — @mixin flex-center, @mixin respond-to($breakpoint). Тогда в _card.scss можно писать @include flex-center и использовать $color-primary без повторного импорта — при @use "variables" as * переменные доступны глобально в этом файле. Подробнее про партиалы и модульность — в статье про препроцессоры CSS.

Полный пример: карточка в SCSS и SASS с миксином

Ниже — один и тот же компонент: карточка с тенью и адаптивным отступом. Сначала SCSS, затем SASS. Используются переменная, миксин для тени и вложенность с &.

SCSS (components/_card.scss):

@use "../variables" as *;
@use "../mixins" as *;

.card {
  @include shadow-sm;
  padding: $spacing-unit * 2;
  border-radius: 8px;
  background: white;

  &__title {
    font-size: 1.25rem;
    color: $color-text;
    margin-bottom: $spacing-unit;
  }

  &__text {
    color: $color-text-muted;
    font-size: 0.875rem;
  }

  &:hover {
    @include shadow-md;
  }
}

Тот же компонент в SASS:

@use "../variables" as *
@use "../mixins" as *

.card
  @include shadow-sm
  padding: $spacing-unit * 2
  border-radius: 8px
  background: white

  &__title
    font-size: 1.25rem
    color: $color-text
    margin-bottom: $spacing-unit

  &__text
    color: $color-text-muted
    font-size: 0.875rem

  &:hover
    @include shadow-md

В обоих случаях на выходе получится одинаковый CSS. Разница только в оформлении: в SASS нет {} и ;, структура задаётся отступами. Миксины shadow-sm и shadow-md можно описать в _mixins.scss один раз и переиспользовать в других компонентах — как это сделать, разобрано в блоке про миксины.

Конвертация: из CSS в SCSS и между синтаксисами

• CSS → SCSS: переименуйте файл: styles.css → styles.scss. Менять содержимое не нужно — любой валидный CSS является валидным SCSS. После этого можно понемногу вводить переменные, вложенность и миксины.
• CSS → SASS: вручную переписать (убрать {} и ;, задать уровни отступами) или использовать конвертер. В интернете есть онлайн-инструменты «CSS to SASS»; можно также использовать CLI: sass-convert style.css style.sass (если доступен в вашей среде).
• SCSS ↔ SASS: один и тот же движок умеет компилировать оба формата. Конвертировать SCSS в SASS (или наоборот) можно тем же sass-convert или онлайн-сервисами. В повседневной работе чаще просто выбирают один синтаксис и придерживаются его во всём проекте.

Связь с другими темами: переменные, миксины, вложенность

Разница SASS и SCSS касается только синтаксиса. Возможности в обоих одинаковые:

• Переменные ($имя: значение) — цвета, отступы, шрифты в одном месте; подробно в статье про препроцессоры CSS.
• Миксины (@mixin / @include) — переиспользуемые блоки стилей (кнопки, медиазапросы, сброс списка); разбор с примерами там же, в блоке миксины.
• Вложенность и & — селекторы внутри селекторов, удобно для БЭМ и компонентов; см. вложенность (nesting).
• Партиалы и модули — разбиение на файлы _variables.scss, _mixins.scss и подключение через @use / @import; описание в том же материале, раздел импорты и партиалы.

То есть после того как вы определились, в чём разница SASS и SCSS и выбрали синтаксис (обычно SCSS), следующий шаг — углубиться в переменные и миксины по ссылкам выше. Для системного изучения вёрстки и сборки подойдёт каталог курсов по фронтенду и программа «Профессиональная вёрстка».

Типичные ошибки при переходе на SASS/SCSS

• В SASS: неверные отступы. В индоент-синтаксисе один лишний или недостающий пробел меняет уровень вложенности — блок «уезжает» к другому родителю или компилятор выдаёт ошибку. Решение: использовать либо только пробелы, либо только табы, и настроить редактор на единый размер отступа (например, 2 пробела). В SCSS эта проблема не так критична: структура задаётся скобками.
• В SASS: точка с запятой после значения. В .sass после значения свойства ; не ставится. Если по привычке написать padding: 1rem;, компилятор может выдать ошибку или некорректно распарсить строку. В SCSS точка с запятой обязательна.
• В SCSS: забыли закрыть скобку. Незакрытая } ломает всю компиляцию — компилятор сообщит о неожиданном конце файла. Помогает подсветка синтаксиса в редакторе и форматирование (Prettier и плагины для SCSS умеют выравнивать скобки).
• Импорты: @import vs @use. В старых туториалах часто встречается @import. В новых проектах рекомендуют @use и @forward: у них предсказуемая область видимости и нет глобального «загрязнения» переменными. Если подключаете файл и переменные «не видны», проверьте, что используете @use и при необходимости as * для глобального доступа к переменным этого файла.
• Расширение при импорте. В @use "variables" не обязательно писать _variables.scss или .scss — Sass сам подставит. Но если у вас одновременно есть _variables.scss и _variables.sass, нужно явно указать расширение, иначе возможна путаница.

Разбор типичных ошибок и хороших привычек в вёрстке даётся в курсе «Профессиональная вёрстка»: там есть и SASS, и работа с редактором, и сборка.

Частые вопросы

Можно ли смешивать .sass и .scss в одном проекте?
Да. Dart Sass компилирует оба формата; можно иметь часть файлов в .scss, часть в .sass. Главное — не смешивать синтаксис внутри одного файла и учитывать, что при импортах расширение имеет значение.

SASS устарел?
Нет. Устарела старая реализация на Ruby и устаревает LibSass (C). Актуальный и рекомендуемый движок — Dart Sass; он поддерживает и SASS, и SCSS и развивается.

Что лучше для карьеры — SASS или SCSS?
В вакансиях и в реальных проектах чаще встречается SCSS. Имеет смысл уверенно владеть SCSS; синтаксис SASS при необходимости можно прочитать за несколько минут, зная про отступы.

Чем SASS/SCSS отличаются от обычного CSS с переменными (custom properties)?
CSS-переменные (var(--color-primary)) работают в браузере в рантайме и удобны для тем и переключения стилей без пересборки. SASS-переменные обрабатываются при компиляции: они могут участвовать в вычислениях, миксинах, условиях; на выходе в CSS попадают уже «подставленные» значения. Часто их комбинируют: дизайн-токены в SASS, а часть из них экспортируют в custom properties для динамических тем.

Нужно ли учить оба синтаксиса?
Нет. Достаточно уверенно владеть SCSS — его хватает для любого проекта и для прохождения собеседований. Синтаксис SASS можно за пять минут «прочитать», зная правило: отступы вместо скобок, без точек с запятой. Переписывать проекты с SCSS на SASS смысла нет, если только вы лично не предпочитаете индоент-стиль.

Чем SASS/SCSS отличаются от Less и Stylus?
Less и Stylus — другие препроцессоры с похожими идеями (переменные, миксины, вложенность). Синтаксис у каждого свой. SASS/SCSS — самый распространённый вариант в индустрии и в учебных материалах; при выборе «какой препроцессор учить первым» обычно выбирают именно его. Основы переносимы: поняв переменные и миксины в SASS, про Less или Stylus проще прочитать документацию при необходимости.

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

• Препроцессоры CSS: SASS и SCSS за 10 минут — переменные, миксины, вложенность и импорты с примерами кода.
• Перенос строки в HTML и CSS — как управлять переносами в вёрстке.
• Профессиональная вёрстка — курс на Хекслете: адаптив, Grid, Flexbox, SASS и сборка.

Выводы и куда двигаться дальше

• SASS и SCSS — два синтаксиса одного препроцессора. Разница: SCSS со скобками и точками с запятой (похож на CSS), SASS — без них, с отступами. Возможности (переменные, миксины, вложенность) одинаковые.
• Для перехода с обычного CSS и в большинстве проектов удобнее SCSS. Чтобы начать использовать SASS/SCSS, достаточно установить Dart Sass, создать .scss-файл и скомпилировать его в .css.
• Компиляция возможна через CLI, Vite, Webpack или другой сборщик; в HTML подключается уже готовый CSS. Для разработки полезны флаги --watch и --source-map; для продакшена — --style compressed.
• Крупные проекты удобно разбивать на партиалы (_variables.scss, _mixins.scss, компоненты) и подключать через @use. CSS в SCSS конвертируется простым переименованием файла; в SASS — переписыванием синтаксиса или конвертером.
• Типичные ошибки: в SASS — неверные отступы и лишние точки с запятой; в SCSS — незакрытые скобки. Для новых проектов предпочтителен @use вместо устаревающего @import.
• Углублённо переменные, миксины, вложенность и партиалы разбирают в статье «Препроцессоры CSS: SASS и SCSS за 10 минут».

Чтобы пройти SASS/SCSS в рамках вёрстки и сборки с нуля, подойдёт «Профессиональная вёрстка» на Хекслете. Для полного пути во фронтенд — профессия «Фронтенд-разработчик» и каталог курсов по фронтенду.