{

Difference between @import and @use in Sass/scss


SASS provides @import and @use allows to reuse of mixins functions and variables in other modules.

@import and @use in Sass

@import allows you to import sass and CSS stylesheets into another stylesheet.

component.scss

$primary-color: blue;

@mixin button {
   background-color:$primary-color;
   color:white
}

Let’s import component.scss in style.scss

@import "component.scss";
.buttonId{
   @include  button;
}

Let’s import component.scss in style.scss use @use

@use "component.scss" as component
.buttonId{
   @include  component.button;
}

Let’s see what is different between these two

Difference between @import and @use rules in Sass and SCSS

@import:

  • @import allow you to import all features available globally.

  • If we have multiple component components containing variables, mixins, and functions, On importing this in another style makes it difficult to track where these mixins and variables are defined in it.

  • Since it is globally available, Name collision occurs from different components with the same name

  • During compilation, Generated CSS is copied to output CSS compilation time is more and output contains more bloated CSS content. This is also caused due to importing the same multiple times in the hierarchy.

  • SASS framework going to deprecate the @import rule

  • There are no private styles applied to an only specific file

@use:

  • It is a replacement of @import
  • It provides namesakes and avoids name conflict issues.
  • @use allow you to import only one time, even if you use multiple places in styles.
  • @use imports by default with the filename as a namespace.
  • private styles are only applied to the current stylesheet with _(underscore) and -(hyphens)
  • @extend applies to the stylesheet that is imported Placeholder selectors do not apply namespace naming.
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.