Структура настоящего проекта

Предыдущие уроки вводили части по одной. Здесь они собираются в структуру небольшого сайта из этого курса: токены, функции и миксины в abstracts/, компоненты в собственных файлах и один main.scss, который только связывает их.

Дерево папок

styles/
├── abstracts/
│   ├── _index.scss       ← @forward трёх файлов ниже
│   ├── _tokens.scss
│   ├── _functions.scss
│   └── _mixins.scss
├── base/
│   ├── _index.scss
│   └── _base.scss
├── components/
│   ├── _index.scss
│   ├── _buttons.scss
│   └── _cards.scss
├── utilities/
│   ├── _index.scss
│   └── _spacing.scss
└── main.scss

В каждой папке есть _index.scss, поэтому другие файлы могут подключить всю папку по имени.

abstracts — инструменты без вывода

Индексный файл собирает все инструменты в один модуль:

// styles/abstracts/_index.scss
@forward "tokens";
@forward "functions";
@forward "mixins";

Чтобы пример был коротким, в каждом из трёх файлов по одному члену:

// styles/abstracts/_tokens.scss
$primary: #2563eb;

// styles/abstracts/_functions.scss
@function space($step) {
  @return $step * 4px;
}

// styles/abstracts/_mixins.scss
@mixin card-shadow {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

Компоненты

Каждый файл компонента начинается с одной и той же строки и дальше обращается к инструментам через короткое пространство имён a:

// styles/components/_buttons.scss
@use "../abstracts" as a;
 
.btn {
  padding: a.space(2) a.space(4);
  color: white;
  background: a.$primary;
}

// styles/components/_cards.scss
@use "../abstracts" as a;
 
.card {
  padding: a.space(4);
  @include a.card-shadow;
}

Индекс компонентов только перечисляет файлы:

// styles/components/_index.scss
@use "buttons";
@use "cards";

Здесь стоит @use, а не @forward: цель — подключить CSS компонентов, а не передать дальше их члены.

Остальные папки и main.scss

Папки base и utilities устроены так же: индекс со строками @use и файлы с правилами.

// styles/base/_index.scss
@use "base";

// styles/base/_base.scss
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

// styles/utilities/_index.scss
@use "spacing";

// styles/utilities/_spacing.scss
.mt-0 {
  margin-top: 0;
}

Главный файл не содержит правил. Он задаёт порядок слоёв — от общего к частному:

// styles/main.scss
@use "base";
@use "components";
@use "utilities";

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}
 
.btn {
  padding: 8px 16px;
  color: white;
  background: #2563eb;
}
 
.card {
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
 
.mt-0 {
  margin-top: 0;
}

Сначала идут базовые стили, компоненты переопределяют их, а служебные классы стоят последними, чтобы побеждать компоненты.

Правила порядка в проекте

Правило	Зачем
Один компонент — один файл	Легко найти и удалить
`abstracts/` не выводит CSS	Любой файл может безопасно его подключить
В `main.scss` только `@use`	Порядок слоёв виден сразу
Значения берутся из токенов	Одно изменение обновляет весь сайт
Вложенность до трёх уровней	Селекторы остаются короткими

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

Файлы папки не подключаются автоматически. Если создать components/_forms.scss и забыть добавить @use "forms"; в components/_index.scss, его стилей просто не будет в main.css — без всякой ошибки. Создав файл, сразу добавьте его в индекс.

Спасибо, что читаете!