The use of @import has been deprecated in Sass, but many people still use it. The replacements instead should be @use and @forward. Why & How?
Why Stop Using @import?
Let's take a look at Sass announcement for the future of @import from Sass and why it becomes obsolete nowadays.
The Sass team discourages the continued use of the@import
rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the@use
rule instead.
However, it's not only the main reason just because they don't want us to use it. Let's take a look at the problem with @import
in Sass/Scss:
- Because everything's global, libraries must prefix to all their members to avoid naming collisions.
@import
makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.@extend
rules are also global, which makes it difficult to predict which style rules will be extended.- Each stylesheet is executed and its CSS emitted every time it’s
@imported
, which increases compilation time and produces bloated output. - There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.
The new module system and the @use
rule address all these problems.
Read more: Become A Master of CSS Color Values: Simple Explanation
Why Start Using @use?
Because @use
adds namespaces to member names, it’s safe to choose very simple names like $radius
or $width
when writing a stylesheet.
This is different from the old @import
rule, which encouraged that users write long names like $mat-corner-radius
to avoid conflicts with other libraries, and it helps keep your stylesheets clear and easy to read!
How To Use @use & its Namespace
You can access variables, functions, and mixins from another module by writing <namespace>.<variable>
, <namespace>.<function>()
, or @include <namespace>.<mixin>()
.
By default, the namespace is just the last component of the module’s URL.
Let's take a look at the original file names corners.scss
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}
For example, we want to use the corners
in the style.scss
, the syntax is almost similar to @import
@use "src/corners";
.button {
@include corners.rounded;
padding: 5px + corners.$radius;
}
By default, the namespace using in style
is the last component from the @use
URL as corners
. We can easily access the @mixin
or property $radius
by simply call corners.
Custom Namespace
In most scenarios, getting the last component of the URL from @use is not always the ideal case. For instance, if the filename does not represent the meaning of our uses or we @use have lots of files in one style.scss
. In this case, we actually can custom its namespace.
@use "src/corners" as corner;
@use "src/colors" as color;
@use "src/functions" as func;
.button {
@include corner.rounded;
padding: 5px + corner.$radius;
}
In some situations, we don't want to repeat the namespace such as corner.
, we can declare namespace as global namespace as following:
@use "src/corners" as *;
.button {
@include rounded;
padding: 5px + $radius;
}
In the end, the benefit of using @use
that helps us to know exactly where the styles coming from which source. However, If you want to load members from many files at once, you can use the @forward
to forward them all from one shared file.
Reference All @use
with Index File
If you write an index.scss
or index.sass
in a folder, the index file will be loaded automatically when you load the URL for the folder itself.
@mixin code-block {
padding: .25em;
line-height: 0;
}
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
Under shared folder
, create file calls index.scss
, the file is the reference between all of scss child under shared
.
@use 'code';
@use 'lists';
How we don't have to go through every single scss file, just use it reference as following:
@use 'foundation';
.block {
@include foundation.code-block;
}
Why & How To Use @forward
Why Do We Need @forward?
According to the definition of Sass:
The @forward
rule loads a Sass stylesheet and makes its mixins, functions, and variables available when your stylesheet is loaded with the @use rule. It makes it possible to organize Sass libraries across many files, while allowing their users to load a single entry point file.
Wait…does it sound confusing to you? So why don't we just simply use @use
instead of @forward
. What is the point? Let me explain it in other words by below practice:
SASS @forward at-rule
is used to expose the members of modules (stylesheets) included in a stylesheet using the @use at-rule
when the stylesheet is included in another stylesheet.
Let's take an example to understand this.
If we have a stylesheet _padding.sass which contains all the style rules (mixins, variables, etc) for padding, and we include this in our stylesheet style.sass using the @use
at-rule.
Now if we have to create another stylesheet, let's say newstyle.sass and we include the style.sass in this stylesheet using the @use
at-rule, then we won't be able to access the members of _padding.sass stylesheet in the newstyle.sass stylesheet.
In this case, we need @forward
.
How Do We Use @forward?
The rule is written @forward "<url>"
. It loads the module at the given URL just like @use
, but it makes the public members of the loaded module available to users of your module as though they were defined directly in your module.
@mixin list-reset {
margin: 0;
padding: 0;
list-style: none;
}
@forward "src/list";
@use "bootstrap";
li {
@include bootstrap.list-reset;
}
What is Next?
In this article, we shed the light on a new technique @use & @forward that will replace the old syntax @import in a near future. However, we could not go through to the details of both @use & @forward which are many interesting things that would be in further articles.
Next practice, you could go through every previous or current project using scss/sass and try to remove the obsolete @import and adapt new @use & @forward. Sooner or later, once your project gets updated, maybe all stylesheets will be broken down. So, do it now!