Sassの新しいモジュールシステム

Sassと言っても、実装している言語によって3つに分かれています。

今回のモジュールシステムの導入で初めてDart Sassの存在を知った方も多いのではないでしょうか。Dart Sassは高度に最適化されており、動作速度が速く、JavaScriptとの互換性もあります。
Dart SassはSass公式で推奨していることもあって、新機能は順次実装されます。
また、本編で紹介するSassのモジュールとは変数、関数、ミックスインを分類して再利用性を高めたsassのソースファイルのを指しています。

新モジュールシステムでは今まで分割したファイル、パーシャルを読み込むときに使っていた@importが廃止予定です。代わりに @use を使うことになりますが、書き方や扱い方が変わってきます。

一方、@useも@importと同様に別のファイルの情報を読み取ります。 スタイルの定義は従来通り、@useを使ったファイルに結合されることになりますが変数や関数、mixin はファイル単位で名前空間を持ちます。

たとえば、プロジェクト全体で利用する変数をまとめた_variables.scssというファイルがあったとします。@importを使用すると、変数はグローバルになり、どのファイルからもアクセスできます。

_base.scss:

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

_variables.scss:

$wh: "100%;

_base.scss:

body {
  width: $wh;
}

@useを使用する場合はこれらの変数はグローバルにはならず、読み込んだファイル内でしかアクセスできません。また、デフォルトでファイル名に応じた名前空間を持ち、以下のように〇〇.$variableという形式で参照することになります。

style.scss:

@use "base";

_base.scss:

@use "variables";

body {
  width: variables.$wh;
}

@importでは実際に使われているメンバーがどのsassファイルで宣言されているかを把握するのがとても大変でした。新しいモジュールシステムでは、ファイルごとに参照するモジュールを宣言するため、簡単に把握できると同時に役割ごとにファイルを分けることで、シンプルな変数名やmixin名を使うことができるようになります。

@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; // エラーになります。
}

@useはロードしたファイルにスコープが生成され、そのファイルでのみ使用することができますが@forwardを使用すると@forwardを宣言している対象ファイルに書かれてる内容を＠useで参照することができます。大きなライブラリを作る際に便利かもしれません。

_module.scss:

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

_base.scss:

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

@importが廃止されるとSassのエコシステムに大きく影響を及ぼすと思います。当面の間は混乱するかと思いますがgulpで新モジュールシステムを試してみても良いかもしれません。

参考： Sass公式