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.
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.
March 2023 update:
Answer from abney317 on Stack OverflowAs week of Mar 06 to Mar 12, the npm downloads of the sass and node-sass packages are 11,700,729 and 2,831,234 respectively, meaning we have reached 80.5% adoption rate for Dart Sass, which is above the target for making the deprecation @import current.
Is it okay to still use @imports? I am trying to exclusively use the modular system of @use and @forward
What is the difference between CSS @import and SASS/SCSS @import? - Stack Overflow
Allow using @use to import only a module's members
Sass '@import' and '@use' rules
Videos
I am migrating a project from bootsrap v4.6 to v5.3.3 (I am using npm and not a cdn for my bootstrap styles). The old structure (creative tim template) used exclusively u/import . I would like to exclusively use u/use but I found it quite difficult to properly get my boostrap files in from node_modules. Even when I u/use ~/bootstrap/scss/bootstrap.scss I still get errors where the variables file is not recognizing the mixin that was declared in the functions file and things alike.
My questions are the following:
-
Do people still use u/import in modern scss, specifically with bootstrap
-
Advice on a good general structure for sass files and u/use after migrating from bootstrap v4 to v5.3.3. Specifically how your main.scss is structured, how your custom styles are structured.
Thank you
@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
@importbut 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
css @import happens at runtime, Sass @import at build time.
I've been reading the documentation for Sass. It says that the '@import' rule is going to be phased out, and that the '@use' rule will be the preferred rule. Now when I go to use the '@use' rule it doesn't compile properly. What it should be doing, from my understanding, is importing the code class into style.scss and revealing it's variables.
What's happening is '@use' 'base'; seems to just be copied over. I can see the variables in style.scss, but the code class isn't being imported to the file.
Am I looking at this correctly? What could be going on?