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';
The new
@useis similar to@import. but has some notable differences:
- The file is only imported once, no matter how many times you
@useit 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,
@extendswill 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.