La documentación de Sass desaconseja el uso de @import:

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

Y está previsto considerar @import obsoleto:

July 2022: In light of the fact that LibSass was deprecated before ever adding support for the new module system, the timeline for deprecating and removing @import has been pushed back. We now intend to wait until 80% of users are using Dart Sass (measured by npm downloads) before deprecating @import, and wait at least a year after that and likely more before removing it entirely.
March 2023: As week of Mar 06 to Mar 12, the npm downloads of the sass and node-sass packages are 11,700,729 and 2,831,234 respectively, meaning we have reached 80.5% adoption rate for Dart Sass, which is above the target for making the deprecation @import current.

¿Qué es lo que está mal con @import?

Hay una serie de problemas, entre ellos:

• Las variables, mixins y funciones están disponibles para todos los Scss y es difícil llegar a saber donde están definidos.
• Al ser todo de acceso global, en ocasiones habrá que hacer uso de prefijos (o la solución que se considere oportuna) para evitar problemas con nombres coincidentes (esto tiende a ser un problema cuando se usan librerias externas).
• Las reglas @extend también son globales, e impredecibles.
• Los Scss son compilados cada vez que se importan, lo que provoca código generado excesivo y más tiempo de compilación (depende lo que se esté metiendo en los Scss importados, y si se están repitiendo @import).

¿Cómo se solucionan los inconvenientes de @import?

@use resuelve estos problemas y nos da un mejor control de lo que se importa al Scss (aunque hay que definirlo en cada ocasión que se haga uso de un Scss).

Ejemplo:

// src/_measures.scss
$radius: 3px

// src/_corners.scss
@use "measures"

@mixin rounded {
  border-radius: measures.$radius;
}

// style.scss
@use "src/corners";
@use "src/measures";

.button {
  @include corners.rounded;
  padding: 5px + measures.$radius;
}

// style.scss
.button {
  border-radius: 3px;
  padding: 8px;
}