Урок 02

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

Способы установки

Три варианта:

NPM пакет sass — рекомендуется.
Dart Sass binary — без Node.js.
VS Code расширение — быстро для прототипов.

Правило: NPM — стандарт. Расширение — для быстрых экспериментов.

NPM: установка

npm init -y
npm install -D sass

Что появилось:

node_modules/sass/ — движок.
package.json — devDependency.
.bin/sass — CLI.

Проверка:

npx sass --version

Результат: 1.XX.X compiled with dart2js ....

Компиляция файла

Базовый синтаксис:

npx sass input.scss output.css

С путём:

npx sass src/scss/main.scss public/css/main.css

Что даёт: читает SCSS, пишет CSS.

Watch-режим

npx sass --watch src/scss/main.scss public/css/main.css

Что делает:

Компилирует один раз.
Следит за изменениями.
Автоматически перекомпилирует.

Что видно:

Sass is watching for changes. Press Ctrl-C to stop.

Compiled src/scss/main.scss to public/css/main.css.

Правило: --watch — обязательно в dev.

Watch папки

npx sass --watch src/scss:public/css

Что даёт: компилирует все .scss из папки в папку.

⚠️ Партиалы (_name.scss) игнорируются — только самостоятельные файлы.

Правило: для одного входного файла — прямая команда. Для нескольких — папка.

Пакетные скрипты

package.json:

{
    "scripts": {
        "sass": "sass src/scss/main.scss public/css/main.css",
        "sass:watch": "sass --watch src/scss:public/css",
        "sass:prod": "sass src/scss/main.scss public/css/main.css --style=compressed --no-source-map"
    }
}

Запуск:

npm run sass
npm run sass:watch
npm run sass:prod

Правило: команды в package.json, а не в голове.

Стили вывода

Expanded (dev):

npx sass input.scss output.css --style=expanded

.button {
    background: #c1442e;
    padding: 12px 24px;
}

Compressed (prod):

npx sass input.scss output.css --style=compressed

.button{background:#c1442e;padding:12px 24px}

Правило: dev — expanded для читаемости. prod — compressed для размера.

Source maps

Автоматически включены при --style=expanded.

Отключить:

npx sass input.scss output.css --no-source-map

Что даёт: .css.map файл — сопоставление CSS-строк с SCSS.

Зачем: в DevTools видно, где именно в SCSS определено правило.

Правило: dev — с source map. prod — без.

Что делает DevTools

Без source map:

main.css:245  → .button { background: #c1442e; }

С source map:

_buttons.scss:12  → .button { background: $primary; }

Что даёт: редактируешь сразу исходный SCSS.

Конфиг через CLI

Полный синтаксис:

npx sass \
    --style=compressed \
    --no-source-map \
    --load-path=node_modules \
    src/scss/main.scss public/css/main.css

Флаги:

--style — формат вывода.
--source-map / --no-source-map.
--load-path — где искать @use.
--watch — следить за файлами.
--quiet — без предупреждений.
--charset — кодировка.
--error-css — генерировать CSS с ошибкой.

Установка Dart Sass (без Node.js)

Скачать бинарник:

curl -L https://github.com/sass/dart-sass/releases/download/1.80.0/dart-sass-1.80.0-linux-x64.tar.gz -o sass.tar.gz
tar -xzf sass.tar.gz
sudo mv dart-sass /opt/
sudo ln -s /opt/dart-sass/sass /usr/local/bin/sass

Проверка:

sass --version

Когда: CI, Docker, серверы без Node.js.

VS Code: Live Sass Compiler

Установка: расширение glenn2223.live-sass.

Настройки (.vscode/settings.json):

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/public/css"
        },
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/public/css"
        }
    ],
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**"
    ]
}

Запуск: кнопка «Watch Sass» в статус-баре.

Что даёт: компиляция при сохранении без терминала.

Интеграция с Vite

Установка:

npm install -D sass

Всё. Vite сам увидит .scss файлы и скомпилирует.

main.ts:

import './styles/main.scss';

Что даёт: Vite подхватит автоматически.

Интеграция с Next.js

npm install -D sass

Использование:

// app/globals.scss
import './globals.scss';

Что даёт: работает без настройки.

Интеграция с Laravel

Vite + laravel-vite-plugin — стандарт.

vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/scss/app.scss', 'resources/js/app.js'],
        }),
    ],
});

app.scss:

@use 'variables';
@use 'base';

В Blade:

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

Проверка компиляции

1. Никаких ошибок в терминале:

Compiled src/scss/main.scss to public/css/main.css.

2. CSS появился в браузере:

DevTools → Network → main.css есть.
DevTools → Sources → видны строки SCSS.

3. Изменения применяются:

Меняешь SCSS.
Сохраняешь.
Watch перекомпилирует.
Обновляешь страницу — изменения.

Частые проблемы

1. npx sass: command not found:

sass не установлен или npx не работает

Решение: npm install -D sass.

2. Error: Can't find stylesheet to import:

Неверный путь или партиал

Решение: проверить путь, _ в имени партиала.

3. CSS не обновляется:

Watch упал или нет прав на запись

Решение: перезапустить watch, проверить права.

4. Дубли в CSS:

Много CSS-файлов подключено

Решение: один входной файл.

5. Source map не работает:

Не тот путь, отключено

Решение: проверить --source-map.

Практика

1. Установите Sass через npm.

2. Создайте src/scss/main.scss.

3. Настройте скрипт в package.json.

4. Запустите npm run sass:watch.

5. Измените SCSS — проверьте, что CSS обновился.

6. Добавьте source map, посмотрите в DevTools.

7. Добавьте --style=compressed — сравните размер.

Итог

Установка: npm install -D sass.
Компиляция: npx sass in.scss out.css.
Watch — обязательно в dev.
Скрипты в package.json.
expanded для dev, compressed для prod.
Source maps — для отладки.
Live Sass Compiler — для быстрого старта.
Vite / Next / Laravel — встроенная поддержка.
Один входной файл, всё остальное — партиалы.

Дальше — переменные.