Sass @import Rule

What You’ll Learn

Sass @import extends CSS’s @import to load Sass/CSS files at compile time. It is deprecated—this tutorial explains how it worked, why it causes problems, how it differs from @use, and how to migrate, with five compiled examples.

What Is Sass @import?

Official docs: Sass extends CSS’s @import with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets’ CSS together. Unlike plain CSS imports (extra HTTP requests while rendering), Sass imports are handled entirely during compilation.

• Same basic syntax as CSS @import, plus comma-separated lists of files.
• Imported content is evaluated as if it appeared at the @import location.
• Members become globally available after the import.
• Importing the same file again evaluates it again (CSS can duplicate).

⚠️ What’s Wrong With @import?

Official docs list serious issues:

• All variables, mixins, and functions become globally accessible—hard to find definitions.
• Libraries must prefix every member to avoid collisions.
• @extend is also global and hard to predict.
• Each import re-executes the file and can bloat CSS output.
• No private members or private placeholder selectors for downstream files.

The module system (@use / @forward) addresses all of these problems.

📝 Syntax

// Single file (extension optional)
@import "foundation/code";

// Multiple files in one rule
@import "foundation/code", "foundation/lists";

// Nested (scopes CSS)
.theme-sample {
  @import "theme";
}

⚙️ How Import Evaluation Works

Official docs: when Sass imports a file, that file is evaluated as though its contents appeared directly in place of the @import. Mixins, functions, and variables become available, and CSS is inserted at that point. Members defined before the import are also visible inside the imported file.

🔍 Finding the File

• Extensions are optional: @import "variables" loads .scss, .sass, or .css.
• Use forward slashes (even on Windows).
• Relative paths resolve first; load paths are a fallback.
• Partials start with _; omit the underscore when importing.
• A folder’s _index.scss loads when you import the folder.

🎯 Nested Imports

Official docs: imports can nest inside style rules or plain CSS at-rules. Imported CSS is nested in that context. Top-level mixins/functions/variables from the nested import are only available in that nested context.

For authors of the imported file, prefer a mixin (or meta.load-css() in modern code) instead of relying on nested imports.

📄 Plain CSS @imports

Sass leaves some imports as real CSS @imports in the output when:

• The URL ends with .css
• The URL begins with http:// or https://
• The URL is written as url()
• The import has media queries

@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

🚀 How Do I Migrate?

Official docs: prefer @use. Sass provides a migration tool that converts most @import-based code automatically.

🔁 Differences From @use

Examples Gallery

These examples show how legacy @import behaves so you can recognize and migrate it. Prefer @use in new projects. Open View Compiled CSS for verified output.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// style.scss
@import "foundation/code", "foundation/lists";

code {
  padding: 0.25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ul ol, ol ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

// _tokens.scss
$gap: 8px;

@mixin soft {
  border-radius: 4px;
  padding: $gap;
}

// style.scss
@import "tokens";

.card {
  @include soft;
  margin-bottom: $gap;
}

.card {
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
}

// _theme.scss
pre, code {
  font-family: "Source Code Pro", Helvetica, Arial;
  border-radius: 4px;
}

// style.scss
.theme-sample {
  @import "theme";
}

.theme-sample pre, .theme-sample code {
  font-family: "Source Code Pro", Helvetica, Arial;
  border-radius: 4px;
}

@import "theme.css";
@import url("https://fonts.googleapis.com/css?family=Droid+Sans");
@import "landscape" screen and (orientation: landscape);

@import "theme.css";
@import url("https://fonts.googleapis.com/css?family=Droid+Sans");
@import "landscape" screen and (orientation: landscape);

// _tokens.scss
$gap: 8px;

@mixin soft {
  border-radius: 4px;
  padding: $gap;
}

// style.scss — modern
@use "tokens";

.card {
  @include tokens.soft;
  margin-bottom: tokens.$gap;
}

.card {
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
}

🚀 When You Still See @import

• Legacy codebases — older tutorials and packages still use it.
• LibSass projects — no @use; stuck on imports until you switch compilers.
• Plain CSS imports — fonts/CDN/media-query imports that must stay in CSS.
• Migration in progress — mixed @import + @use during a transition.

⚠️ Common Pitfalls

• Using it in new code — deprecated; will be removed in Dart Sass 3.0.
• Duplicate CSS — importing the same file twice re-emits its rules.
• Name collisions — everything is global after import.
• Assuming browser behavior — Sass imports are compile-time unless they match plain-CSS rules.
• Writing @import "file.css" for Sass loading — the .css suffix forces a plain CSS import.

💡 Best Practices