Kent Wynn Kent Wynn
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
Kent Wynn's Promotion Card
  • Kent Wynn’s Shop$10
  • My Account
  • Cart
  • Checkout
544
393
844
20K
0
Kent Wynn Kent Wynn

Software Engineer | UI/UX & Frontend Architect

Become Frontend Master
Kent Wynn Kent Wynn
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
  • CSS
  • Frontend Lang

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

  • July 22, 2021
  • 2.6K views
  • 5 minute read
#STOP: @Import and #START: @Use, @Forward In SASS
Total
0
Shares
0
0
0
0
0
0
0
0
Table of Contents Hide
  1. Why Stop Using @import?
  2. Why Start Using @use?
  3. How To Use @use & its Namespace
    1. Custom Namespace
    2. Reference All @use with Index File
  4. Why & How To Use @forward
    1. Why Do We Need @forward?
    2. How Do We Use @forward?
  5. What is Next?

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.

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

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!

Total
0
Shares
0
0
0
0
0
0
0
Kent Wynn

I'm Kent Wynn, from Vietnam, currently working as a Software Engineer, UI/UX Designs & Frontend Architect. With years of working and project experiences, I decided to develop KentWynn.Com, a technical article-based website for sharing and learning.

Related Topics
  • sass
  • scss
Previous Article
Frontend Architect: The Discipline of Frontend Architecture
  • Frontend Lang

Frontend Architect: The Discipline of Frontend Architecture

  • June 28, 2021
View Post
Next Article
Become A Master of CSS Color Values - Simple Explanation
  • CSS
  • Frontend Lang

Become A Master of CSS Color Values: Simple Explanation

  • July 25, 2021
View Post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • What is HTML6? HTML6’s New Structural Patterns
  • How to safely upload SVG files to WordPress
  • How to Create a Blog | A Guide to Complete Blogging Success
  • Top 20 Best Free Website Speed Test Tools
  • How To Debug WordPress: A Complete Beginner’s Guide
Subscribe To Us

Get New Posts Delivered To Your Inbox

Stay Updated!

Subscribe now to our newsletter to receive latest articles, frontend trends and more!

Connect Me

I’m truly myself.

For me, success means the people we know and together what we are working on. I believe in teamwork and hard work, not magic!
About Me
Quick Navigation
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
Our Services
  • Become Frontend Master Courses
  • Marketing Services$150
  • Website Services$200
Shop Connect
  • Kent Wynn’s Shop$10
    • Wordpress Themes/Plugins
    • UI/UX Software
    • macOS Software
    • eBooks
    • Others
  • My Account
  • Cart
  • Checkout
Kent Wynn Kent Wynn
  • Contact Me
  • Hire Me
  • Donate Me
© 2021 Kent Wynn - Software Engineer | UI/UX & Frontend Architect | All Rights Reserved.

Input your search keywords and press Enter.