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

背景

新しいモジュールシステムが開発された背景として、@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり、といった具合です。

Sassの新しいモジュールシステムはこれらの問題に取り組むとともに、Sassをほかのモダンな言語に近づけることを目指しています。

@use

@useは@importを置き換えるルールで、Sassファイル読み込むための新しい方法です。その最大の特徴はファイルスコープを持つ点です。

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

main.scss:

@import "theme";
@import "base";

_theme.scss:

$font-stack-sans: "Helvetica Neue", sans-serif;
$font-stack-serif: "Georgia", serif;

_base.scss:

body {
  font-family: $font-stack-serif;
}

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

main.scss:

@use "base";

_base.scss:

@use "theme";

body {
  font-family: theme.$font-stack-serif;
}

@importによる読み込みでは、あるSassファイルで使われているメンバーがどこに宣言されているかを把握するのがかなり大変でした。新しいモジュールシステムではファイルごとに参照するモジュールを宣言するため、そのSassファイルがどのモジュールに依存しているのか簡単に把握できるようになります。

@use "theme" as t;

body {
  font-family: t.$font-stack-serif;
}

@use "theme" as *;

body {
  font-family: $font-stack-serif;
}

$base-font-size: 1rem !default;
$base-line-height: 1.5 !default;

@mixin large-text () {
  font-size: $base-font-size * 2;
  line-height: $base-line-height * 0.75;
}

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

h1 {
  @include typography.large-text();
}

$-count: 0;

@use "theme";

.layer {
  z-index: theme.$-count; // Error!
}

@forward

@forwardルールはほかのモジュールのメンバーを読み込みつつ、それらを現在のモジュールのAPIとしてエクスポートします。@useとは違って、@forwardを宣言しているファイル内ではそのモジュールのメンバーを参照できません。たとえば大きなライブラリを作るときなどに便利そうです。

bootstrap/_index.scss:

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

_base.scss:

@use "bootstrap";

p {
  margin-top: 0;
  margin-bottom: bootstrap.$paragraph-margin-bottom;
}

show節でどのメンバーをエクスポートするかを選べます。それ以外のメンバーはエクスポートされません。

@forward "functions" show color-yiq;

逆にプライベートにしたいメンバーをhide節で除外することもできます。

@forward "functions" hide assert-ascending;

実際に試してみる

新しいモジュールシステムの実装されたSass 1.23.0は、すでにベータ版が提供されていて、パッケージマネージャーやSassのリポジトリからインストールできます。また実際に試せるリポジトリも用意してみました。ぜひ触ってみてください。

タイムライン

今年10月にはDart Sassで安定版がリリースされる予定です。LibSassへの実装はまだこれからで、スケジュールも未定だそうです。

@importルールは、モジュールシステムがDart SassとLibSassの両方でリリースされてから1年後、またはDart Sassのリリースから2年後（遅くとも2021年10月）には非推奨になります。そしてそのさらに1年後（つまり遅くとも2022年10月）にサポートが終了する予定です。

おわりに

実際のプロジェクトで使ってみないことには見えてこないこともあるでしょうし、普及するまでにはそれなりの混乱もあるものと思われます。とは言えSassがより使いやすい言語になるのは間違いないのではないしょうか。楽しみですね。

参考資料

• The Next-Generation Sass Module System
• Request For Comments: Module System « Sass Blog
• Module System Preview « Sass Blog
• Web制作者のためのSassの参考書.pdf - Speaker Deck