Stop Using @import & Start Using @use, @forward In Sass

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!