Урок 05

Партиалы и импорты

Зачем партиалы

Проблема: один большой style.scss на 5000 строк.

Решение: разделить на модули.

Что даёт:

  • Легко найти нужное.
  • Команда работает параллельно.
  • Меньше конфликтов в git.
  • Переиспользование.

Что такое партиал

Партиал — файл с _ в начале имени.

_variables.scss     # партиал (не компилируется отдельно)
variables.scss      # обычный файл (компилируется в variables.css)

Что важно:

  • Партиал не создаёт свой CSS.
  • Только подключается в другие файлы.

Правило: все файлы кроме точки входа — партиалы.

@use — современный способ

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

Что делает:

  • Подключает файл.
  • Создаёт namespace.
  • Загружает один раз (даже если вызывают несколько раз).

Правило: @use — стандарт.

Namespace

По умолчанию — имя файла без _:

@use 'variables';

.button {
    color: variables.$primary;
}

Своё имя:

@use 'variables' as v;

.button {
    color: v.$primary;
}

Без namespace:

@use 'variables' as *;

.button {
    color: $primary;
}

⚠️ as * — риск конфликтов. Ок только для одного модуля с чистыми именами.

Правило: as v — безопасно и читаемо.

@forward

Пересборка модулей:

// _index.scss
@forward 'variables';
@forward 'mixins';
@forward 'components/buttons';

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

@use 'styles' as *;

Что даёт: одна точка входа в модуль.

Правило: @forward — для сборки библиотек.

@import — устаревший

@import 'variables';
@import 'mixins';

⚠️ Deprecated. Не использовать в новом коде.

Почему плохо:

  • Общий namespace — конфликты.
  • Загружает повторно.
  • Нельзя ограничить доступ.

Правило: @use вместо @import.

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

Простая:

styles/
├── main.scss              # точка входа
├── _variables.scss
├── _mixins.scss
└── _base.scss

main.scss:

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

7-1 pattern

Классическая архитектура:

styles/
├── abstract/
│   ├── _variables.scss
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _placeholders.scss
│
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _base.scss
│
├── components/
│   ├── _button.scss
│   ├── _card.scss
│   ├── _form.scss
│   └── _modal.scss
│
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _sidebar.scss
│   └── _grid.scss
│
├── pages/
│   ├── _home.scss
│   ├── _about.scss
│   └── _admin.scss
│
├── themes/
│   ├── _light.scss
│   └── _dark.scss
│
├── vendors/
│   └── _bootstrap.scss
│
└── main.scss

7 папок: abstract, base, components, layout, pages, themes, vendors. 1 входной файл: main.scss.

main.scss 7-1

// Abstract
@use 'abstract/variables';
@use 'abstract/mixins';

// Base
@use 'base/reset';
@use 'base/typography';

// Layout
@use 'layout/header';
@use 'layout/footer';
@use 'layout/grid';

// Components
@use 'components/button';
@use 'components/card';
@use 'components/form';

// Pages
@use 'pages/home';

// Themes
@use 'themes/dark';

Правило:

  • Сначала abstract — переменные и миксины.
  • Потом base — reset, типографика.
  • Потом layout, components, pages.
  • Темы — последними.

Порядок импортов

Правило:

  1. Абстракции (переменные, миксины).
  2. Reset / базовые стили.
  3. Layout.
  4. Компоненты.
  5. Страницы.
  6. Утилиты.

Почему: каскад — порядок важен.

Вложенные папки

@use 'components/buttons':

  • Ищет _buttons.scss или buttons.scss.
  • В папке components.

Что важно: _components/buttons.scss — не работает.

Index файлы

components/_index.scss:

@forward 'buttons';
@forward 'card';
@forward 'form';

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

@use 'components';

Что даёт: одна точка входа в группу.

Правило: _index.scss — для групп.

Частые структуры

Простой сайт:

styles/
├── main.scss
├── _variables.scss
├── _mixins.scss
├── _reset.scss
├── _typography.scss
├── _layout.scss
├── _header.scss
├── _footer.scss
├── _buttons.scss
└── _forms.scss

Средний проект:

styles/
├── main.scss
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
├── components/
│   ├── _button.scss
│   ├── _card.scss
│   └── _form.scss
└── pages/
    └── _home.scss

Большой проект:

7-1 pattern + _index.scss в каждой папке.

Правила именования

Партиал: _name.scss — kebab-case.

Папки: components/, layout/, abstract/.

Один компонент — один файл.

Правило: имя файла = имя блока в BEM.

Практика

1. Создайте структуру:

styles/
├── main.scss
├── abstracts/
│   ├── _variables.scss
│   └── _mixins.scss
├── base/
│   └── _reset.scss
├── components/
│   ├── _button.scss
│   └── _card.scss

2. main.scss:

@use 'abstracts/variables' as v;
@use 'abstracts/mixins' as m;
@use 'base/reset';
@use 'components/button';
@use 'components/card';

3. Скомпилируйте, проверьте один CSS.

4. Добавьте новую папку — layout/ — с _header.scss.

5. Убедитесь, что всё собирается в один файл.

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

1. @import вместо @use:

@import 'variables';   // устарело

Решение: @use 'variables' as v.

2. Партиал без _:

components/button.scss   // компилируется в отдельный CSS

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

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

@use 'variables';   // а файл в abstracts/_variables.scss

Решение: @use 'abstracts/variables'.

4. Всё в одном файле:

main.scss на 5000 строк

Решение: разделять.

5. Слишком много файлов:

20 папок, каждый файл на 5 строк

Решение: найти баланс.

6. Импорты в каждом файле:

// _button.scss
@use 'variables';
@use 'mixins';
// в _card.scss тоже самое

Решение: каждый файл импортирует только то, что нужно.

7. Namespace конфликтует:

@use 'variables';
@use 'components/variables';

Решение: as v1 и as v2.

8. Порядок неправильный:

components раньше abstracts

Решение: abstracts первыми.

Итог

  • Партиал — _name.scss.
  • @use — современный способ.
  • @forward — для _index.scss.
  • @import — устарел.
  • 7-1 pattern — классика.
  • Namespace через as.
  • Порядок: abstract → base → layout → components → pages.
  • Один входной файл — main.scss.
  • Один компонент — один файл.

Дальше — миксины (mixins).