What's the difference between @import and @use SCSS rules?

Question

When to use SCSS rule: @use and when to use @import? What is the difference between them and the best-case scenarios to use them?

@use '_styles.scss'; 
@import '_styles.scss';

Spatiotemporal

FYI: if someone needs more info regarding the working of @use can refer to this #71427123 – Renter

Answer 1

The new @use is similar to @import. but has some notable differences:

• The file is only imported once, no matter how many times you @use it in a project.
• Variables, mixins, and functions (what Sass calls "members") that start with an underscore (_) or hyphen (-) are considered private, and not imported.
• Members from the used file (buttons.scss in this case) are only made available locally, but not passed along to future imports.
• Similarly, @extends will only apply up the chain; extending selectors in imported files, but not extending files that import this one.
• All imported members are namespaced by default.

https://css-tricks.com/introducing-sass-modules/

@import will be deprecated in favor of @use and @forward, and support will be dropped by October 2022 at the latest.

July 2022 update:

In light of the fact that LibSass was deprecated before ever adding support for the new module system, the timeline for deprecating and removing @import has been pushed back. We now intend to wait until 80% of users are using Dart Sass (measured by npm downloads) before deprecating @import, and wait at least a year after that and likely more before removing it entirely.

March 2023 update:

As week of Mar 06 to Mar 12, the npm downloads of the sass and node-sass packages are 11,700,729 and 2,831,234 respectively, meaning we have reached 80.5% adoption rate for Dart Sass, which is above the target for making the deprecation @import current.

Maggiemaggio