@forward и индексные файлы

Когда каждому компоненту нужны и переменные, и миксины, каждый файл начинается с нескольких строк @use. Правило @forward собирает члены нескольких файлов в один модуль: компонент загружает этот единственный модуль и получает всё сразу.

Передача файлов дальше

Пусть в styles/abstracts/ есть два файла:

// styles/abstracts/_variables.scss
$primary: #2563eb;
$gap: 16px;

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

Создайте styles/abstracts/_index.scss, который передаёт оба:

// styles/abstracts/_index.scss
@forward "variables";
@forward "mixins";

@forward ничего не выводит и не даёт доступа к членам самому текущему файлу. Оно только говорит: кто загрузит этот модуль, получит и члены этих файлов.

Подключение папки

Файл с именем _index.scss особенный: @use с именем папки загружает именно его. Теперь компоненту нужна одна строка, а пространство имён — имя папки, abstracts:

// styles/components/_cards.scss
@use "../abstracts";
 
.card {
  padding: abstracts.$gap;
  border-top: 4px solid abstracts.$primary;
  @include abstracts.card-shadow;
}

// styles/main.scss
@use "components/cards";

.card {
  padding: 16px;
  border-top: 4px solid #2563eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

<style>
  .card {
    padding: 16px;
    border-top: 4px solid #2563eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>
 
<div class="card">Карточка получила отступ, цвет и тень</div>

@include вставляет миксин — о миксинах следующая глава. Обратите внимание: пространство имён пишется перед именем миксина, а не перед @include.

Что передаётся

По умолчанию @forward передаёт все публичные члены. Ограничить список помогают ключевые слова:

Правило	Что передаёт
`@forward "variables" show $primary;`	Только `$primary`
`@forward "mixins" hide card-shadow;`	Всё, кроме миксина `card-shadow`
`@forward "variables" as color-*;`	Всё, с префиксом: `$color-primary`

show и hide полезны библиотеке, у которой есть внутренние помощники, не предназначенные для внешнего использования.

Передача и использование в одном файле

Если самому индексному файлу нужен член модуля, в нём пишут оба правила, и @forward идёт первым:

// styles/abstracts/_index.scss
@forward "variables";
@forward "mixins";
@use "variables";

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

Не кладите правила CSS в abstracts/. Всё, что там лежит, — переменные, миксины, функции — само по себе CSS не выводит, поэтому любой компонент может спокойно подключать эту папку. Если добавить правило .card в _mixins.scss, оно попадёт в результат там, где папка загружена впервые, и найти его источник станет трудно. Правила держите в base/, layout/ и components/.

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