@use vs @forward in Sass

For years, @import was the default way to split Sass across files. It also duplicated CSS output, made load order fragile, and let every file pollute the global namespace. Dart Sass replaced it with @use and @forward — and if you’re still on @import, this is the migration worth doing before your next refactor.

@use — import with a namespace

@use loads a module once and exposes its members through a namespace. Variables, mixins, and functions from the loaded file are accessed as namespace.$variable or @include namespace.mixin().

$primary-color: #007bff;
$secondary-color: #6c757d;

@use 'variables';

body {
  background-color: variables.$primary-color;
  color: variables.$secondary-color;
}

You can also alias a module:

@use 'variables' as vars;

body {
  color: vars.$primary-color;
}

@forward — re-export a module’s API

@forward makes another file’s members available to whatever imports your file. Think of it as building a public API layer: consumers @use your entry file without knowing the internal file structure.

$primary-color: #007bff;
$secondary-color: #6c757d;

@use 'variables';

@mixin button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: #fff;
  background-color: variables.$primary-color;
  border-radius: 0.25rem;
}

@forward 'variables';
@forward 'mixins';

@use 'index' as *;

.button {
  @include button;
}

@use is for consuming. @forward is for publishing.

With @forward, you can also hide or rename members before re-exporting:

@forward 'variables' hide $internal-token;
@forward 'mixins' show button;

When to use which

The short version

• @use — pull members in, always namespaced.
• @forward — pass members through to downstream consumers.
• @import — deprecated; migrate when you touch a file, not all at once.

Once the namespace habit clicks, Sass modules feel less like ceremony and more like the package boundaries you already expect in TypeScript.