Sass @import Rule

Beginner
11 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass @import rule — deprecated compile-time imports, prefer @use
Definition

Definition and Usage

Sass extends CSS’s @import so you can load Sass and CSS stylesheets at compile time: mixins, functions, and variables become available, and CSS is combined in place. Unlike browser CSS imports, this does not add extra HTTP requests while the page renders.

As of Dart Sass 1.80.0, @import is deprecated and will be removed in Dart Sass 3.0.0. Prefer @use and @forward. Learn @import to read legacy code and migrate safely.

Official stance.

Per the Sass docs: globals, duplicate CSS, and unpredictable @extend are why the module system replaces @import. Use the official Sass migrator on entrypoints when you can.

Partials.

Files meant only to be imported start with _ (for example _code.scss). You can omit the underscore and extension when importing.

Do not use in new projects.

Start with @use. Keep @import only for temporary legacy support or plain CSS passthrough (fonts, CDN, media-query imports).

Syntax

Syntax

SCSS
// 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";

Imported contents are evaluated as if they appeared at the @import site. Multiple URLs can be comma-separated.

Reference

vs @use & Migration

Legacy goals and modern replacements:

GoalLegacyPrefer instead
Load members + CSS@import "x";@use "x";
Library entrypointImport many files@forward + one @use
Scope third-party CSSNested @importMixin or meta.load-css()
Real CSS import@import "x.css";Same passthrough, or link in HTML
Loads once / namespacedNo (globals; can duplicate)Yes with @use
Code

SCSS Examples

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.

Example 1 — Basic Multi-File Import

Comma-separated imports pull CSS from multiple partials.

SCSS
// 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";

How It Works

  1. Both partials are inlined at the import site.
  2. Nested & & expands every parent pair.
  3. Extensions are optional when resolving Sass files.
  4. Modern equivalent: two @use rules (each module loads once).

Example 2 — Global Members

After import, mixins and variables are available without a namespace.

SCSS
// _tokens.scss
$gap: 8px;

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

// style.scss
@import "tokens";

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

How It Works

  1. No namespace — $gap and soft are global.
  2. Convenient, but fragile when two files define the same name.
  3. Libraries often prefix every member to avoid collisions.
  4. Prefer @use "tokens" then tokens.$gap.

Example 3 — Nested Import

Imported CSS is nested under the surrounding selector.

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

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

How It Works

  1. Import sits inside a style rule.
  2. Imported selectors are nested under .theme-sample.
  3. Useful for scoping third-party CSS in legacy projects.
  4. Modern options: a mixin, or meta.load-css().

Example 4 — Plain CSS Passthrough

Some imports are left for the browser, not resolved by Sass.

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

How It Works

  1. .css suffix forces a plain CSS import.
  2. url() and http(s) stay for the browser.
  3. Media queries also keep the import in CSS.
  4. These are not Sass file loads — no members, no inlining.

Example 5 — Same Idea With @use

Modern rewrite of the global-members pattern.

SCSS
// _tokens.scss
$gap: 8px;

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

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

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

How It Works

  1. Same CSS as the global import example.
  2. Names are namespaced under tokens.
  3. Module loads once even if other files also @use it.
  4. This is the pattern to use going forward.

Edge Cases & Pitfalls

Most @import trouble is deprecation, duplicate CSS, globals, or confusing Sass loads with CSS passthrough.

deprecated

Removed in Dart Sass 3.0

Do not start new work on @import. Migrate with the official Sass migrator when possible.

duplicate

Imported twice = CSS twice

Unlike @use, importing the same file again re-evaluates it and can re-emit its rules.

.css

Explicit .css is passthrough

Write @import "code" to load code.css as Sass. Write @import "code.css" to leave a browser import.

paths

Use forward slashes

Sass resolves imports as URLs. Even on Windows, write foundation/code, not backslashes.

Toolchain

Sass Support

@import still works today for compatibility, but the language is moving to the module system. Prefer Dart Sass and plan migration before 3.0.

ImplementationStatus
Dart SassSupported but deprecated (1.80+); removed in 3.0
LibSass / node-sassSupported (no @use; deprecated toolchain)
Ruby SassSupported (end-of-life)
BrowsersOnly see compiled CSS or plain CSS @imports

Prefer Dart Sass for new projects. SCSS and indented syntax both support @import.

Remember

Key Takeaways

  • Deprecated: prefer @use / @forward for all new work.
  • Compile-time: Sass inlines files; members become global.
  • Plain CSS imports ( .css, url(), media) stay for the browser.
  • Migrate early before Dart Sass 3.0 removes @import.

One line: know @import for legacy code — ship new Sass with @use.

Compile

Compile Notes

Conceptual flow for a Sass (not plain CSS) import:

flow.txt
1. Resolve the URL (partials, load paths, index files)
2. If plain-CSS pattern → emit browser @import and stop
3. Otherwise evaluate the file in place of the @import
4. Expose members globally; emit CSS at that point
5. Plan replacement with @use / @forward

Frequently Asked Questions

Yes. As of Dart Sass 1.80.0, @import is deprecated and will be removed in Dart Sass 3.0.0. Prefer @use (and @forward for library entrypoints).
It loads another Sass or CSS stylesheet at compile time, combining CSS and making mixins, functions, and variables available. Unlike browser CSS @import, it does not add extra HTTP requests at render time.
It makes members global, encourages long prefixes, makes @extend unpredictable, can duplicate CSS when a file is imported multiple times, and has no private members.
Prefer rewriting imports as @use / @forward. Sass provides an official migration tool that converts most @import-based code automatically.
When the URL ends with .css, starts with http(s)://, is written as url(), or includes media queries—Sass leaves those as CSS @import in the output.
Yes. Nested imports scope the imported CSS under a selector or at-rule. For new code, prefer a mixin or meta.load-css() instead.

Next: Sass @mixin and @include

Reusable style chunks — a better nested-import alternative too.

Sass @mixin Rule →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass @forward Rule Sass @mixin and @include