Установка и компиляция

Sass устанавливается как пакет npm и запускается командой sass. Команда читает файл .scss и записывает файл .css рядом с ним или в другую папку. Понадобится Node.js версии 20 или новее.

Установка

Создайте папку для сайта и установите в неё Sass как зависимость для разработки:

mkdir site
cd site
npm init -y
npm install --save-dev sass
npx sass --version

npm init -y создаёт package.json, а последняя команда выводит установленную версию, например 1.93.2. npx запускает программу sass из папки node_modules проекта.

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

Исходники лежат в styles/, скомпилированные файлы попадают в css/, а страница подключает только CSS:

site/
├── index.html
├── css/
│   └── main.css      ← создаёт Sass
├── styles/
│   └── main.scss     ← правите вы
└── package.json

Создайте styles/main.scss:

// styles/main.scss
$radius: 8px;
 
.card {
  padding: 16px;
  border-radius: $radius;
}

Компиляция

Команда принимает исходный файл и файл результата:

npx sass styles/main.scss css/main.css

Появится папка css с файлом main.css:

.card {
  padding: 16px;
  border-radius: 8px;
}

В index.html подключите его как обычно: <link rel="stylesheet" href="css/main.css">.

Слежение за изменениями

Запускать команду после каждой правки утомительно. Флаг --watch оставляет Sass работать и перекомпилирует файл при каждом сохранении:

npx sass --watch styles/main.scss css/main.css

После каждого сохранения в терминале появляется строка вида Compiled styles/main.scss to css/main.css. Остановить слежение — Ctrl+C.

Карты исходников

Рядом с main.css Sass записывает ещё main.css.map — карту исходников (source map). Она сообщает браузеру, из какой строки какого .scss-файла пришло каждое правило, и инструменты разработчика показывают main.scss:4 вместо строки в скомпилированном файле. Чтобы связать их, Sass добавляет в конец main.css строку /*# sourceMappingURL=main.css.map */. Отключить карты можно флагом --no-source-map; примеры в курсе показывают CSS без этой строки.

Скрипты в package.json

Сохраните команды как скрипты npm, чтобы не запоминать флаги:

{
  "scripts": {
    "sass:dev": "sass --watch styles/main.scss css/main.css",
    "sass:build": "sass --no-source-map styles/main.scss css/main.css"
  }
}

Теперь во время работы запускайте npm run sass:dev. Внутри скриптов npx не нужен.

Частая ошибка

Не правьте css/main.css вручную. При следующей компиляции Sass перезапишет файл, и ваши изменения пропадут без предупреждения. Все изменения делайте в styles/, а папку css/ считайте генерируемой.