はじめに

Sass を使っていると、次のような警告が表示されることがあります。

1Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

これはエラーではありませんが、将来的に使えなくなる機能であることを知らせる警告です。 Sass の公式コンパイラである Dart Sass では、@import が非推奨となり、3.0.0 で削除される予定です。 この記事では、なぜ @import が廃止されるのか、そしてどのように対応すればよいのかをわかりやすく解説します。

なぜ @import は廃止されるのか？

1. グローバルスコープの問題

1@import "variables";

このように書くと、読み込んだファイル内の変数や mixin がすべてグローバルに展開されます。

その結果、

• 名前の衝突が起こりやすい
• プロジェクトが大きくなると管理が難しい

といった問題が発生します。

2. 重複読み込みの可能性

同じファイルを複数回 @import すると、CSS が重複して出力される場合があります。 意図しないスタイルの増加につながることもあります。

3. モジュール設計に適していない

現在の開発では、ファイルごとに役割を分ける「モジュール設計」が一般的です。 しかし @import には名前空間の仕組みがなく、この考え方に合っていません。

これからは @use / @forward を使う

新しい書き方は @use です。

1@use "variables";
2
3body {
4  color: variables.$primary-color;
5}

@use を使うと、自動的に名前空間が付与されます。 そのため、どのファイルの変数なのかが明確になります。

名前空間のカスタマイズ

実務では、名前空間を短くしたり、省略したりすることがよくあります。

1. as でカスタマイズ

1@use "variables" as vars;
2
3body {
4  color: vars.$primary-color; // 短縮できる
5}

2. as * でグローバル展開

1@use "variables" as *;
2
3body {
4  color: $primary-color; // 名前空間なしで使える
5}

を使うと、名前空間なしで変数を使えますが、 名前の衝突リスクがあるため、慎重に使う必要があります。

@forward とは？

1@forward "variables";

@forward は、他のファイルにまとめて公開したいときに使います。 共通スタイルやライブラリ構成で便利です。

@use と @forward の違い

• @use は、そのファイル内で使うために読み込む
• @forward は、他のファイルに再公開するために読み込む

具体的な利用例

例えば、複数の設定ファイルをまとめる

を作る場合：

ファイル構成

1styles/
2  ├── _variables.scss
3  ├── _mixins.scss
4  ├── _functions.scss
5  └── _index.scss
6main.scss

各ファイルの内容

1// styles/_variables.scss
2$primary-color: #3498db;
3$font-size: 16px;

1// styles/_mixins.scss
2@mixin flex-center {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

1// styles/_functions.scss
2@function double($value) {
3  @return $value * 2;
4}

@forward でまとめる

1// styles/_index.scss
2@forward "variables";
3@forward "mixins";
4@forward "functions";

メインファイルで使う

1// main.scss
2@use "styles"; // _index.scss を読み込む
3
4body {
5  color: styles.$primary-color; // variables の内容にアクセス
6  font-size: styles.double(8px); // functions の内容にアクセス
7  
8  .container {
9    @include styles.flex-center; // mixins の内容にアクセス
10  }
11}

@forward を使わない場合との比較

1// @forward を使わない場合
2@use "styles/variables";
3@use "styles/mixins";
4@use "styles/functions";
5
6body {
7  color: variables.$primary-color;
8  font-size: functions.double(8px);
9  
10  .container {
11    @include mixins.flex-center;
12  }
13}

@forward を使えば、複数のファイルを 1 つにまとめて公開でき、 インポート文を減らしてコードをシンプルに保てます。

既存プロジェクトの対応方法

1. @import を @use / @forward に変更

自分のファイルで使う場合は

を使います：

1@import "variables";

⬇

1@use "variables";

他のファイルに再公開する場合は

を使います：

1// _index.scss
2@import "variables";
3@import "mixins";

⬇

1// _index.scss
2@forward "variables";
3@forward "mixins";

2. 変数の書き方を修正

1color: $primary-color;

⬇

1color: variables.$primary-color;

このように、ファイル名を付けて参照します。

まとめ

@import がなくなるのは、ただのルール変更ではありません。 Sass が「モジュール」という考え方にしっかり変わるための、大事なステップです。

@use / @forward を使うことで、

• コードを直しやすくなる
• 同じコードを何回も読みこまなくてよくなる
• 変数やファイルの使う場所がはっきりする

という良い点があります。

これからの Sass を、もっと安全でわかりやすく使うために、@use / @forward を使うことをおすすめします。