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.

@useを宣言するときにas節を使うと独自の名前空間を持たせることもでき、変数の値を書き換えることが可能になります。

_base.scss:

@use "variables" as v;

body {
  width: v.$wh;
}

変数を上書きするとき、従来の@importルールでは変数をグローバルに定義する必要がありましたが@useはwith節を用いることで変数を上書きでき、グローバルな名前空間に影響しません。

_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();
}

メンバー（変数、関数、Mixins）の先頭に-(ハイフン)や_(アンダースコア)を使用するとプライベートメンバーとなり、宣言されたファイル内でしか利用できません。別ファイルで呼び出してもエラーになります。

_variables.scss:

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

_base.scss:

@use "variables";
button {
  box-shadow: variables.$_shadow; // エラーになります。
}

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