The @import Rule (Legacy)

What Does @import Do?

@import loads another Sass file's variables, mixins, and functions directly into the current file's global scope, with no namespacing. If the imported file contains actual style rules, @import also copies those rules into the output every time it runs.

This is the CSS @import rule's syntax repurposed by Sass with much broader behavior, but it should not be confused with plain CSS's @import url(...), which is a completely different, runtime browser feature.

// _colors.scss (legacy style, no leading @use anywhere in project)
$primary: #2563eb;

// main.scss
@import 'colors';

.button {
  background: $primary; // no namespace, used directly
}

Notice $primary is used with no namespace at all, this is exactly the global-scope behavior that made @import risky in larger codebases.

@import Syntax

@import 'file';
@import 'file1', 'file2';

• @import 'file'; loads a single Sass partial into the global scope.
• Multiple files can be imported in one statement, comma-separated.
• Imported files' variables and mixins are usable with no namespace prefix.
• A file loaded via @import re-runs every time it is imported, unlike @use.

@import vs @use Migration Cheatsheet

How legacy @import patterns map onto the modern module system.

Why @import Was Deprecated

The Sass team officially deprecated @import because its global-scope behavior caused real problems at scale: naming collisions between unrelated files, unpredictable load order effects, and no way to keep implementation details private.

• No namespacing meant any two files could accidentally define the same variable name.
• No privacy meant every helper variable or mixin was effectively public API.
• Files could be imported multiple times, silently re-running their code and duplicating output.

Migrating From @import to @use

Migrating usually means adding a namespace prefix everywhere a variable, mixin, or function from another file is used, and moving all @import statements to the top of the file as @use statements.

// Before
@import 'colors';
@import 'mixins';

.card {
  background: $primary;
  @include shadow-md;
}

// After
@use 'colors';
@use 'mixins';

.card {
  background: colors.$primary;
  @include mixins.shadow-md;
}

The official sass-migrator CLI tool can automate most of this migration across a whole codebase.

Current Status of @import

As of recent Dart Sass releases, @import still works but emits deprecation warnings, and the Sass team has stated it will eventually be removed entirely. New projects should never introduce new @import statements.

Common Mistakes

• Starting a brand-new project with @import instead of @use/@forward.
• Assuming @import in Sass behaves like the native CSS @import url(...) rule; they are unrelated features with very different behavior and performance implications.
• Not running the official sass-migrator tool when migrating a legacy codebase, and instead hand-editing every file.
• Mixing @import and @use in the same file without understanding that @imported files still share the global, unnamespaced scope.

Key Takeaways

• @import is Sass's original, deprecated way to combine files, sharing everything in one global scope.
• It causes naming collisions and re-runs files on every import, unlike the module system.
• @use and @forward are the recommended replacement for all new Sass code.
• The sass-migrator CLI tool can automate migrating an existing codebase away from @import.