@use и пространства имён

Каждый файл Sass — это модуль. Правило @use загружает модуль и даёт доступ к его членам — переменным, миксинам и функциям — через пространство имён: префикс с точкой, например variables.$primary. Благодаря пространствам имён имена из разных файлов никогда не конфликтуют.

Переменная из другого файла

Создайте styles/abstracts/_variables.scss с константами сайта:

// styles/abstracts/_variables.scss
$primary: #2563eb;
$radius: 8px;

Файл кнопок загружает его и обращается к переменным через пространство имён. По умолчанию это последняя часть пути без подчёркивания — здесь variables:

// styles/components/_buttons.scss
@use "../abstracts/variables";
 
.btn {
  background: variables.$primary;
  border-radius: variables.$radius;
}

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

.btn {
  background: #2563eb;
  border-radius: 8px;
}

Сам файл переменных ничего не выводит: в нём нет правил, только значения.

Короткое пространство имён

Длинный префикс можно переименовать через as:

// styles/components/_cards.scss
@use "../abstracts/variables" as v;
 
.card {
  border-radius: v.$radius;
}

С as * члены доступны без префикса: $radius. Это удобно для собственного файла переменных, но в большом проекте становится непонятно, откуда взялось имя. Используйте as * только для одного-двух файлов, которые нужны каждому компоненту.

Модуль загружается один раз

Если десять компонентов подключают через @use один и тот же файл переменных, его код выполняется один раз, и его CSS, если он есть, попадает в результат тоже один раз. В этом главное отличие от старого @import, который копировал файл при каждом подключении.

Приватные члены

Член, имя которого начинается с - или _, — приватный: он виден только внутри своего файла. Так обозначают вспомогательные значения:

// styles/abstracts/_variables.scss
$-base: 4px;
$gap: $-base * 4;

Другие файлы могут прочитать variables.$gap, а variables.$-base — ошибка.

Настройка модуля

Переменная с пометкой !default получает это значение, только если другое не передано. Файл, который загружает модуль, может передать своё значение через with:

// styles/abstracts/_theme.scss
$primary: #2563eb !default;
 
.link {
  color: $primary;
}

// styles/main.scss
@use "abstracts/theme" with ($primary: #16a34a);

.link {
  color: #16a34a;
}

Так библиотеки вроде Bootstrap позволяют менять свои цвета, не правя их файлы.

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

Каждый файл должен сам подключать через @use всё, что ему нужно. Загрузка переменных в main.scss не делает их видимыми в components/_buttons.scss: Sass остановится с ошибкой Undefined variable или There is no module with namespace "variables". Добавляйте строку @use в начало каждого файла, который пользуется членами модуля.