В чём разница между директивами @use и @import в Sass?

В Sass долгое время единственным способом подключения файлов была директива @import. Она работает как простая вставка содержимого: всё, что определено в подключаемемом файле, попадает в глобальную область видимости. Это удобно на старте, но в больших проектах приводит к конфликтам имён, случайным переопределениям переменных и дублированию CSS в итоговой сборке.

Проблемы @import

• Все переменные, миксины и функции становятся глобальными.
• Повторный импорт одного и того же файла вставляет его CSS несколько раз.
• Нет явного указания, откуда пришла та или иная сущность.
• Порядок импортов критичен и легко ломается.

Как работает @use

Директива @use загружает файл как модуль. Его содержимое доступно только через пространство имён, обычно совпадающее с именем файла. Модуль подключается один раз, даже если его вызывают из нескольких мест. Это устраняет дублирование и делает зависимости явными.

// _colors.scss
$primary: #3498db;
@mixin button { padding: 8px 16px; }

// main.scss
@use 'colors';

.button {
  color: colors.$primary;
  @include colors.button;
}

Настройка модулей и пространства имён

С помощью @use ... with (...) можно передавать значения переменным модуля до его загрузки. Это заменяет старый подход с переопределением переменных перед импортом. Также можно задавать собственный префикс через as или подключать без префикса через as *, но последнее не рекомендуется.

// _theme.scss
$radius: 4px !default;

// main.scss
@use 'theme' with ($radius: 12px);
.card { border-radius: theme.$radius; }

Важно: @use должен идти до любых других правил, кроме @forward и переменных. Директива @forward дополняет систему модулей, позволяя реэкспортировать содержимое.

Итог: используйте @use в новых проектах — он даёт изоляцию, предсказуемость и отсутствие дублирования. @import оставляйте только для поддержки legacy-кода, так как он официально признан устаревшим.