Migration to Dart Sass 3.0

Migration to Dart Sass 3.0

News
Green Panda Studio
•
01 October 2025

The Sass team announced that Dart Sass 3.0 will arrive no earlier than two years after version 1.80.0. When it ships, several features will be removed completely.

Preparing for Dart Sass 3.0: Goodbye @import, Hello @use

Dart Sass is moving forward. The next major release, Dart Sass 3.0, will remove long-deprecated features such as the @import rule and global functions like map-get. If your stylesheets still depend on them, it’s time to update.

In this post we’ll cover what’s changing, why it matters, and how you can migrate smoothly.

What’s Changing in Dart Sass 3.0

The Sass team announced that Dart Sass 3.0 will arrive no earlier than two years after version 1.80.0. When it ships, several features will be removed completely:

  • @import → Removed. Replaced by @use and @forward.
  • Global built-in functions (e.g. map-get, nth, call) → Removed. You must import functions from the relevant module (sass:map, sass:list, etc.).
  • Legacy global color functions → Replaced by namespaced versions from sass:color.

Right now these features still work, but trigger deprecation warnings. With 3.0 they will fail with errors.

Why @import Had to Go

The old @import rule had serious issues:

  • It pollutes the global scope with variables and mixins.
  • Order of imports changes the outcome, often leading to brittle code.
  • Performance suffers because the same file can be compiled multiple times.

@use and @forward fix these problems by introducing explicit scoping. Code is loaded once, names are controlled, and dependencies are easier to reason about.

Migrating from @import to @use

Before

skin.scss
@import "@quesby/core/sass/_reset";
@import "_theme-variables";
@import "@quesby/core/sass/_mixins";
@import "_base";

After

skin.scss
@use "@quesby/core/sass/reset";
@use "theme-variables" as *; // optional: expose variables without prefix
@use "@quesby/core/sass/mixins" as *;
@use "base";

Notice how each dependency is namespaced. If you omit as *, you’ll need to prefix variables or mixins with the module name:

.container {
  max-width: mixins.container-width(laptop);
}

This explicitness avoids collisions and makes code more predictable.

Migrating Global Functions

Before

max-width: map-get($container-max-widths, tablet);

After

@use "sass:map";


max-width: map.get($container-max-widths, tablet);

The pattern is always the same: import the right built-in module and call the function with dot notation.

Quick Reference Table

Old Syntax (Deprecated) New Syntax (Supported)
@import "file"; @use "file"; or @forward "file";
map-get($map, $key) map.get($map, $key)
nth($list, $n) list.nth($list, $n)
adjust-color($c, $args...) color.adjust($c, $args...)
lighten($c, $amount) color.scale($c, $lightness: $amount)

Keep this table handy when refactoring your codebase.

Step-by-Step Migration Strategy

  1. Inventory your imports. Find all @import rules in your codebase.
  2. Convert shared variable/mixin files. Use @forward in an index file to re-export what other files need.
  3. Update your main entry files (skin.scss, etc.) to use @use instead of @import.
  4. Replace global functions with their module equivalents (map.get, list.nth, color.adjust, etc.).
  5. Run your build in verbose mode to catch any leftover deprecations.

When Should You Migrate?

You still have time: Dart Sass 3.0 is at least two years away. But the safest approach is to migrate now:

  • No more noisy warnings during builds.
  • Cleaner, more modular Sass code.
  • Zero risk of breakage when 3.0 drops.

If you’re starting a new project today, don’t use @import at all—begin with @use and @forward.

Final Thoughts

Sass 3.0 will be the cleanest, most predictable version of Sass yet. By dropping legacy features, the team is ensuring a simpler, more robust future for stylesheet authoring.

Don’t wait until the last minute. Begin the migration today and your projects will be future-proof by the time Dart Sass 3.0 arrives.