Sass's New Module System

Sass can be divided into three implementations depending on the language it is built with.

With the introduction of the module system, many of you may have encountered Dart Sass for the first time. Dart Sass is highly optimized, offering fast performance and compatibility with JavaScript.
As it is officially recommended by the Sass team, new features are continuously implemented in Dart Sass.
Additionally, the “Sass modules” introduced in this article refer to Sass source files that organize variables, functions, and mixins to improve reusability.

In the new module system, @import—which was previously used to load split files and partials—is scheduled to be deprecated. Instead, @use will be used, and with it come changes in syntax and handling.

Like @import, @use also loads information from other files. Style definitions are still merged into the file that uses @use, but variables, functions, and mixins are now scoped with namespaces on a per-file basis.

For example, suppose there is a file called _variables.scss that contains variables used throughout the entire project. When using @import, these variables become global and can be accessed from any file.

_base.scss:

@import "variables";
@import "base";

_variables.scss:

$wh: "100%;

_base.scss:

body {
  width: $wh;
}

When using @use, these variables are no longer global and can only be accessed within the file where they are loaded. Additionally, each file has a default namespace based on its filename, and variables are referenced in the format ○○.$variable, as shown below.

style.scss:

@use "base";

_base.scss:

@use "variables";
body {
width: variables.$wh;
}

With @import, it was often difficult to determine which Sass file a particular member was declared in. In the new module system, each file explicitly declares the modules it references, making it much easier to understand dependencies. At the same time, by separating files based on their roles, it becomes possible to use simpler variable and mixin names.

When declaring @use, you can use the as clause to assign a custom namespace. This also allows you to override variable values.

_base.scss:

 @use "variables" as v;

body {
width: v.$wh;
}

When overriding variables, the traditional @import approach required defining variables in the global scope. However, with @use, variables can be overridden using the with clause without affecting the global namespace.

_variables.scss:

 $txt-size: 1rem; $txt-line-height: 1.3;

@mixin text () {
font-size: $txt-size;
line-height: $txt-line-height;
}

_base.scss:

 @use "variables" with ( $base-font-size: 1.125rem, $base-line-height: 1.8, );

h1 {
@include variables.text();
}

By prefixing members (variables, functions, and mixins) with a - (hyphen) or _ (underscore), they become private members and can only be used within the file where they are declared. Attempting to access them from another file will result in an error.

_variables.scss:

 $_shadow: 10px 10px 10px rgba(0,0,0,0.4);

_base.scss:

 @use "variables"; button { box-shadow: variables.$_shadow; // This will result in an error. }

While @use creates a scope for the loaded file and limits its usage to that file, @forward allows the contents of the target file (where @forward is declared) to be accessed via @use. This can be particularly useful when building large libraries.

_module.scss:

 @forward "variables"; @forward "mixins";

_base.scss:

 @use "module"; { font-size: module.$base-font-size; }

The deprecation of @import is expected to have a significant impact on the Sass ecosystem. While there may be some confusion for a while, it could be a good idea to try out the new module system using tools like Gulp.

Reference: Sass Official Website