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

user_12891961 0
Viewed 24423

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';
sass css
1 Answers

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.

user_3917150
Related