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

Разница между @use и @import в SASS/SCSS

@use и @import — это две директивы для подключения других SCSS файлов в SASS. @import — это старый способ, который устарел. @use — это современный способ с лучшей изоляцией переменных и функций.

@import (устаревший способ)

@import был исторически первым способом подключения других файлов SASS. Он просто копирует содержимое файла в место импорта.

// variables.scss
$primary-color: #007bff;
$font-size: 16px;

function myFunction() {
  // ...
}

// main.scss
@import 'variables';  // Подключаем файл

body {
  color: $primary-color;  // Переменная доступна
  font-size: $font-size;
}

.button {
  background: $primary-color;  // И здесь тоже доступна
}

Проблемы @import:

1. Глобальный скоуп:

// module1.scss
$color: red;

// module2.scss
$color: blue;

// main.scss
@import 'module1';
@import 'module2';
// Какое значение будет у $color? blue (последнее переопределит)
// Это может привести к конфликтам

2. Множественные подключения:

// utils.scss
$spacing-unit: 8px;

// button.scss
@import 'utils';

// card.scss
@import 'utils';

// main.scss
@import 'button';
@import 'card';
// utils.scss подключается 2 раза!
// Весь код из utils будет в результирующем CSS дважды

3. Сложность с переименованием:

// lib.scss (от другого разработчика)
$color: red;
$size: 10px;

// my-component.scss
@import 'lib';

// Теперь нужно помнить $color и $size из lib
// Что если нужны разные значения $color?
// Остаётся только переопределять — конфликты гарантированы

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

@use подключает модули с изоляцией переменных и функций в пространство имён (namespace).

// variables.scss
$primary-color: #007bff;
$font-size: 16px;

@function darken-color($color, $amount) {
  @return darken($color, $amount);
}

// main.scss
@use 'variables' as vars;  // Подключаем с префиксом

body {
  color: vars.$primary-color;   // Обращаемся через пространство имён
  font-size: vars.$font-size;
}

.button {
  background: vars.darken-color(vars.$primary-color, 10%);
}

Преимущества @use:

1. Изоляция переменных:

// module1.scss
$color: red;

// module2.scss
$color: blue;

// main.scss
@use 'module1' as mod1;
@use 'module2' as mod2;

.box-1 {
  color: mod1.$color;  // red
}

.box-2 {
  color: mod2.$color;  // blue
}
// Конфликтов нет! Каждый модуль имеет свой скоуп

2. Однократное включение:

// utils.scss
$spacing-unit: 8px;

// button.scss
@use 'utils';

// card.scss
@use 'utils';

// main.scss
@use 'button';
@use 'card';
// utils.scss загружается один раз
// Результирующий CSS не дублируется

3. Явное использование:

@use 'typography' as typo;
@use 'colors' as colors;
@use 'spacing' as space;

.card {
  padding: space.$large;           // Явно видно откуда берётся переменная
  font-size: typo.$heading-size;
  background: colors.$background;
}
// Понятно, откуда что берётся. Легче найти баги.

4. Приватные переменные:

// _typography.scss
$_private-ratio: 1.5;  // Начинается с подчёркивания
$base-size: 16px;

@function scale($level) {
  @return $base-size * pow($_private-ratio, $level);
}

// main.scss
@use '_typography' as typo;

.heading {
  font-size: typo.scale(2);  // ОК — функция публичная
}

// $typo$_private-ratio  // ОШИБКА! Приватная переменная

Сравнительная таблица

Практические примеры

Правильная структура с @use:

// src/styles/_variables.scss
$colors: (
  primary: #007bff,
  success: #28a745,
  danger: #dc3545,
);

$breakpoints: (
  mobile: 320px,
  tablet: 768px,
  desktop: 1024px,
);

// src/styles/_mixins.scss
@use '_variables' as var;

@mixin button-base() {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

@mixin media-mobile() {
  @media (max-width: map-get(var.$breakpoints, mobile)) {
    @content;
  }
}

// src/components/button.scss
@use '../styles/_variables' as var;
@use '../styles/_mixins' as mixin;

.button {
  @include mixin.button-base();
  background: map-get(var.$colors, primary);
  color: white;
  border: none;
  transition: background 0.3s ease;

  &:hover {
    background: darken(map-get(var.$colors, primary), 10%);
  }
}

.button-danger {
  @include mixin.button-base();
  background: map-get(var.$colors, danger);
}

// src/styles/main.scss
@use 'normalize' as *;  // * импортирует все в глобальный скоуп
@use 'typography';
@use '../components/button';
@use '../components/card';

// Результат: чистый, изолированный код

Миграция с @import на @use

// До (старый @import)
@import 'variables';
@import 'mixins';
@import 'reset';

body {
  color: $text-color;
  font-size: $base-font-size;
}

// После (новый @use)
@use 'variables' as var;
@use 'mixins' as mixin;
@use 'reset';

body {
  color: var.$text-color;
  font-size: var.$base-font-size;
}

Когда использовать @use с *

// Иногда удобно импортировать всё в глобальный скоуп
@use 'reset' as *;  // Все стили reset применятся как если бы были в этом файле

// Это эквивалентно старому @import 'reset';
// Но более явно показывает намерение

Резюме

@import — старый способ подключения SCSS файлов с глобальным скоупом и риском конфликтов. @use — современный способ с изоляцией переменных, пространствами имён и приватными переменными (через _ префикс). @use обеспечивает более надёжный, масштабируемый и понятный код. Все современные проекты должны использовать @use вместо @import. В будущем @import в SASS будет полностью удалён.