Урок 01

Введение в SCSS

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

Препроцессор CSS — язык, который компилируется в обычный CSS.

Что даёт:

  • Переменные — без CSS-переменных (когда их ещё не было в CSS).
  • Вложенность — писать CSS как HTML.
  • Миксины — переиспользуемые блоки.
  • Функции — вычисления.
  • Импорты — разделение на файлы.
  • Наследование — @extend.

Правило: препроцессор не заменяет CSS. Он компилируется в CSS и уходит в браузер.

Три препроцессора

  • Sass / SCSS — самый популярный.
  • Less — старее, используется в Bootstrap 3.
  • Stylus — минималистичный, реже.

Правило: SCSS — стандарт де-факто. Синтаксис как у CSS.

Sass vs SCSS

Sass — старый синтаксис без {} и ;:

.box
    color: red
    padding: 10px

SCSS — новый, полностью совместим с CSS:

.box {
    color: red;
    padding: 10px;
}

Правило: использовать SCSS. Один и тот же движок, но SCSS читаемее.

Установка (Node.js)

npm install -D sass

Компиляция:

npx sass input.scss output.css

Watch-режим:

npx sass --watch input.scss:output.css

Что даёт: авто-пересборка при изменении.

Установка (VS Code)

Расширения:

  • Live Sass Compiler — комплилирует при сохранении.
  • SCSS IntelliSense — автодополнение.
  • Stylelint — линтер.

Настройки:

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist"
        }
    ]
}

Интеграция в проекты

Vite:

npm install -D sass

Файл style.scss:

$primary: #c1442e;

.button {
    background: $primary;
}

В JS:

import './style.scss';

Webpack:

npm install -D sass sass-loader

Next.js:

npm install -D sass

Просто работает. Импорт *.scss в компонентах.

Компиляция: форматы вывода

Expanded:

.button {
    background: #c1442e;
}

Compressed:

.button{background:#c1442e}

Команда:

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

Правило: dev — expanded. prod — compressed.

Source maps

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

Что даёт: в DevTools видны исходные .scss, а не скомпилированный CSS.

Правило: в dev — включить.

Первый пример

input.scss:

$primary: #c1442e;
$radius: 10px;

.button {
    display: inline-block;
    padding: 12px 24px;
    background: $primary;
    color: #fff;
    border: none;
    border-radius: $radius;
    cursor: pointer;

    &:hover {
        background: darken($primary, 10%);
    }

    &--large {
        padding: 16px 32px;
        font-size: 18px;
    }
}

output.css:

.button {
    display: inline-block;
    padding: 12px 24px;
    background: #c1442e;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.button:hover {
    background: #a83926;
}

.button--large {
    padding: 16px 32px;
    font-size: 18px;
}

Что произошло:

  • Переменные подставились.
  • &:hover → .button:hover.
  • &--large → .button--large.
  • darken() посчитал цвет.

Что уже не нужно

CSS-переменные (--x) — тоже есть. Но SCSS-переменные компилируются, а CSS — работают в браузере.

Что использовать:

  • SCSS-переменные — для конфигов, цветов, breakpoints.
  • CSS-переменные — для тем (тёмная/светлая), динамики.

Правило: SCSS для сборки, CSS для runtime.

Что важно

SCSS-файлы в браузер не отправляются.

В прод уходит только CSS.

Правило: SCSS — инструмент разработки.

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

styles/
├── main.scss         # точка входа
├── _variables.scss   # переменные
├── _mixins.scss      # миксины
├── _base.scss        # базовые стили
├── _buttons.scss     # кнопки
├── _cards.scss       # карточки
└── components/
    ├── _header.scss
    └── _footer.scss

Импорт в main.scss:

@use 'variables';
@use 'mixins';
@use 'base';
@use 'buttons';
@use 'components/header';

Правило: один входной файл, всё остальное — партиалы.

Партиалы

Файл с _ в начале — партиал, не компилируется отдельно.

_variables.scss     # партиал
variables.scss      # компилируется в variables.css

Зачем: разделить большой SCSS на модули.

Практика

1. Установите Sass:

npm install -D sass

2. Создайте style.scss с переменными и вложенностью.

3. Скомпилируйте:

npx sass style.scss style.css

4. Откройте скомпилированный CSS — убедитесь, что всё развернулось.

5. Включите --watch для авто-пересборки.

6. Подключите CSS в HTML.

Частые ошибки

1. Подключение .scss в HTML:

<link href="style.scss">   <!-- не работает -->

Решение: компилировать в .css.

2. Нет watch:

Забыли перекомпилировать

Решение: --watch.

3. Отсутствие партиалов:

Всё в один файл

Решение: разделять по _name.scss.

4. Партиалы с именами без _:

Компилируются в отдельные CSS

Решение: _name.scss.

5. Путают SCSS и CSS-переменные:

--color: red;   /* CSS-переменная, не SCSS */

Решение: $color: red; для SCSS.

6. Компиляция в неправильный путь:

output.css создаётся в корне, а подключается из css/

Решение: указать путь.

7. Забыли source map:

DevTools показывает скомпилированный CSS

Решение: --source-map.

8. Игнорирование stylelint:

Стиль кода разъезжается

Решение: линтер.

Итог

  • SCSS — препроцессор, компилируется в CSS.
  • Установка: npm install -D sass.
  • Компиляция: npx sass in.scss out.css.
  • Watch — для dev.
  • Source maps — для отладки.
  • Структура: точка входа + партиалы.
  • Партиалы — с _ в имени.
  • SCSS в браузер не идёт — только CSS.
  • SCSS для конфигов, CSS-переменные для runtime.

Дальше — установка и компиляция.