SCSS

Question 1

@use instead of @import

Answer 1

When using @import, all the variables, mixins, etc. become globally accessible, which is a problem when you have complex file structures and use libraries. For this reason, using @importis now officially discouraged.

The basic usage of @use is the same as that of @import.

styles.scss:

@use ‘normalize’;

// other styles
Files imported with @use are called modules. To use mixins or variables of these modules, we have to call them using namespaces. By default, the namespace is the filename (without the extension).

src/_colors.scss:

$accent-color: #535353;
@mixin dark-background {
  background-color:#000;
  color:#fff;
}
styles.scss:

@use 'src/colors';
body {
  color: colors.$accent-color;
}
.dark-region {
  @include colors.dark-background;
}
You can also use a custom namespace using as.

@use 'src/colors' as c;
body  {
  color: c.$accent-color;
}
When _ is prepended to a file name of a SCSS file, the parser knows that it is a partial file and it is there only for importing. When importing, the _ part is optional. Note that we used src/colors to import src/_colors.scss.