What's the Difference Between @Import and @Use SCSS Rules

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

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.

What is the difference between @import and @use in Dart Sass?

All credits go to css-tricks.com.

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.

What is the difference between CSS @import and SASS/SCSS @import?

@import in CSS: CSS has an import option that lets you split your CSS into smaller, more maintainable portions.

Whereas,

@import in SASS/SCSS: Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

For Example:

In _reset.scss

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

In base.scss

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

References: SASS Guide

What's the difference between only @use and @use as * SCSS rules?

The Choosing a Namespace doc explains clearly.

By default, a module’s namespace is just the last component of its URL without a file extension. However, sometimes you might want to choose a different namespace—you might want to use a shorter name for a module you refer to a lot, or you might be loading multiple modules with the same filename. You can do this by writing @use "<url>" as <namespace>.

You can even load a module without a namespace by writing @use "<url>" as *. We recommend you only do this for stylesheets written by you, though; otherwise, they may introduce new members that cause name conflicts!

The point of the namespace is

The @use feature of Sass

The new rules @use/@forward and the remove from @import are indeed a really big impact to SASS. It leads to a complete new form to write sass. A try to make an easy explanation for the beginning to use the new technique:

(1) @use works similar to @import. It adds the code from a (config- or partial-)file or a module to your stylesheet.

(2) The difference is: SASS changes the scope of variables/mixins/functions from global (all imported files = one scope) to local files (variables are only valid in the actual file). If you need to use variables/mixins/functions from another (config- or partial-)file you need to 'include' them to the actual file first.

That means for your project(*):

//file ###> _config.scss

$columnWidth: 50%;
$projectColors: (
   primary: red,
   secondary: blue,
);

//file ###> _functions.scss 

@use 'config' as * // --> to use config vars (here: without namespace)

@function getColor( $name ){
   $color: map-get($projectColors, $name);  
   @return $color;
}

//file ###> _partial.scss

@use 'config' as *     // --> use config vars (here: without namespace)
@use 'functions' as *  // --> use functions (here: without namespace)

.class {
   width: $width;
   color: getColor( primary );
}

//file ###> myStylesheet.scss
// no need to @use 'config' or 'functions' 
// as they are not direct needed in this file

@use 'partial'  //--> write the css

---

( * ) Including files without using a namespace is a special case to make the example more easy. Normaly you will include variables/mixins/functions to a separated namespace and call them by namespace.$variable or namespace.mixin. And there are techniques to move special settings to a @used file as well so you can move variable settings to the project. Please have a look to official and excelent description: https://sass-lang.com/documentation/at-rules/use

---

NOTES:

(1) As it is heavily discussed: Yes. This is INDEED the intended new way to work with SASS. (https://github.com/sass/sass/issues/2750)

(2) Very interesting: The actual brandnew version from Bootstrap has moved to the new Sass Version. But as I have seen Bootstrap does not use that new feature @use and still works with @import. That may have reasons ... and it seems not to easy to change the technique.

(3) Also it seems to be a little bit complicated there are some advantages comming with that new technique. Using separate namespaces make it much mor easier to work with external modules without causing name conflicts.

Difference between @import and link in CSS

In theory, the only difference between them is that @import is the CSS mechanism to include a style sheet and <link> the HTML mechanism. However, browsers handle them differently, giving <link> a clear advantage in terms of performance.

Steve Souders wrote an extensive blog post comparing the impact of both <link> and @import (and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.

Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link> over @import

Also, using the <link> tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import.

sass import partials vs non-partials

If I understand your qestion correctly, here is answer:

If the Sass transpiler is watching a directory (either through the command window or via an editor extension), you'll want to exclude changes to these files from transpilation, and Sass makes it easy to do so. Just prepend an underscore to their names.

Source: https://www.tutorialsteacher.com/sass/import-files-and-partials

Let's say you use:

"scss": "sass web/assets/scss/main.scss web/assets/css/main.css --style=compressed --watch"

When transpiller watching changes in main.scss where you importing files, then you get output in main.css. Then it does not matter if you import partials or not.

If you watch a directory, for example:

"scss": "sass web/assets/scss/ web/assets/css/ --style=compressed --watch"

Then, if you don't use partials, you will get every file separate in addition.

Sass @Import rules and naming

Naming your sass files with an underscore generally means that it's understood the file is being @imported and therefore doesn't need to be (and won't be!) compiled as a standalone file -- though this may depend on your build system and how your sass is being compiled in the first place.

Using sass from the command line, say you have the following set of files:

stylesheets/
  _reset.scss
  _fonts.scss
  _header.scss
  contact-page.scss
  style.css

Where style.scss might contain:

@import 'reset.scss';
@import 'fonts.scss';
@import 'header.scss';

(Note that when importing with sass you don't need to include the underscores)

After compile, your new stylesheets/ directory will contain only style.css and contact-page.css, and style.scss will include all the contents of reset, fonts, and header. The underscored files will not compile by themselves.

If you were to rename _reset.scss as reset.scss, it would compile to reset.css, but its contents would also be included in style.css because you're importing it as well.

So: use underscores in your file names if you don't need the file by itself and are @importing it into another.

Import regular CSS file in SCSS file?

Looks like this is unimplemented, as of the time of this writing:

https://github.com/sass/sass/issues/193

For libsass (C/C++ implementation), import works for *.css the same way as for *.scss files - just omit the extension:

@import "path/to/file";

This will import path/to/file.css.

See this answer for further details.

See this answer for Ruby implementation (sass gem)

---

Related Topics