Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

sass

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';
like image 991
Cosmina Palade Avatar asked Jul 06 '20 13:07

Cosmina Palade


People also ask

What is the difference between @import and @USE in SCSS?

Fundamentally both rules do the same thing - load members inside another module. The main differences is how they handle members. @import makes everything globally accessible in the target file.

What is @import in Sass?

Sass Importing Files Just like CSS, Sass also supports the @import directive. The @import directive allows you to include the content of one file in another. The CSS @import directive has a major drawback due to performance issues; it creates an extra HTTP request each time you call it.

What does @include do in SCSS?

The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.

Can we import CSS file in SCSS?

It is now possible to import css files directly into your sass file. The following PR in github solves the issue. The syntax is the same as now - @import "your/path/to/the/file" , without an extension after the file name. This will import your file directly.


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.

like image 150
abney317 Avatar answered Oct 20 '22 13:10

abney317