こんにちは！Webサイトの表示速度やメンテナンス性は、CSSの設計に大きく左右されますよね。多くのWeb制作者が愛用しているSass（Scss）ですが、最近「コンパイルがうまくいかない」「これまで使えていた書き方でエラーが出る」といったお悩みはありませんか？
その原因は、Sassの仕様変更にあるかもしれません。現在、Sassの主流は「Dart Sass」へと移行しており、これまで当たり前のように使われてきた@importルール（ファイルの読み込み）が非推奨となり、将来的には廃止される予定です。
代わりに推奨されているのが、新しい@useルールです。@useは、@importが抱えていた「グローバル汚染（意図せずスタイルが上書きされる）」などの問題を解決し、より安全で効率的なCSS設計を可能にします。
この記事では、既存のSassプロジェクトを@importから@useへ移行するための、主要な4つのステップを分かりやすく解説します。
ステップ1：ファイル読み込みを @import から @use に変更する
まず、Sassのエントリーポイントとなるファイル（例: style.scss）で、各パーシャルファイル（_mixin.scssや_common.scssなど）を読み込んでいる記述を変更します。
▼ 従来の @import での記述
@import 'mixin';
@import 'reset';
@import 'common';
@import 'home';
@media only screen and (max-width: 750px){
@import 'common-sp';
@import 'home-sp';
}▼ 新しい @use での記述
@use "sass:meta";
@use 'mixin';
@use 'reset';
@use 'common';
@use 'home';
@use 'common-sp';
@use 'home-sp';大きな変更点として、@useは@mediaクエリなどの内側では使用できません。@useは、必ずファイルの先頭（コメントや@forwardを除く）で記述する必要があります。
ステップ2：変数やMixinを利用するファイルに @use "mixin" as *; を追加
@importは、読み込んだファイル（例: _mixin.scss）で定義された変数やMixinを、他のすべてのファイルで「グローバル」に使えるようにしていました。しかし@useでは、読み込んだファイル内でしか利用できません。
もし、_common.scssや_home.scssといった子ファイル内で、_mixin.scssで定義した変数（例: $mainColor）やMixin（例: mq-pc）を使いたい場合、各子ファイルの冒頭で以下のように宣言します。
@use "mixin" as *;このas *;という記述（アスタリスク）がポイントです。これは「mixinファイルの変数やMixinを、名前空間なしで使えるようにする」という指定です。
もしas *;がない場合（@use "mixin";とだけ書いた場合）、Sassは自動的にファイル名（mixin）を「名前空間」として割り当てます。その場合、変数の呼び出し方が以下のように変わります。
- 変更前：
font-family: $noto; - 変更後：
font-family: mixin.$noto;
プロジェクトの規模が大きければ名前空間（例: mixin.$noto）で管理する方が安全ですが、既存の@importから最小限の修正で移行したい場合はas *;を使うのが便利です。
ステップ3：SP用scssの書き方を変更する
ステップ1で触れたように、@useは@mediaクエリの中で使えません。
従来（@import）はstyle.scss側でメディアクエリを宣言し、PC用とSP用のファイルを振り分ける書き方が可能でした。
@useへの移行後は、style.scssでは全てのファイルをフラットに読み込みます。そして、SP用のスタイルを記述するファイル（例: _common-sp.scssや_home-sp.scss）の内部でメディアクエリを宣言します。
▼ _common-sp.scss ファイルの例
@use "mixin" as *; // 変数などを使う場合
@media only screen and (max-width: 750px){
// ここにSP用のスタイルを記述する
.section-title {
font-size: 1.8rem;
}
}これにより、コンパイル後も意図した通りにメディアクエリが適用されます。
ステップ4：除算（/）を math.div() に書き換える
Dart Sassへの移行で、もう一つ大きな変更点が「除算（わり算）」の扱いです。
従来、Sassでは/（スラッシュ）記号が除算として機能していました。しかし、CSSの標準機能でもfont: 16px/1.5;のように/が区切り文字として使われるため、Sassがこれを「除算」なのか「CSSの区切り文字」なのか判断できない曖昧さがありました。
この問題を解決するため、Dart Sassでは/記号による除算が非推奨となり、代わりにSassの組み込みモジュール「sass:math」のdiv()関数を使うことになりました。
まず、除算を使いたいファイルの冒頭でsass:mathモジュールを読み込みます。
@use "sass:math";次に、$size / 750 のように記述していた箇所を、math.div($size, 750) のように書き換えます。
▼ 従来の記述例
$rate: $size / 750 * (750 / $width);▼ math.div() を使った記述例
$rate: math.div($size, 750) * (math.div(750, $width));※Sass 2021年のアップデートにより、calc()関数内でのみ/による除算が許可されていますが、基本的にはmath.div()に統一するのが最も安全で確実です。
まとめ
今回は、Sassの@importから@useへの移行に伴う4つの主要な変更点をご紹介しました。
- ステップ1：
@importをファイルの先頭で@useに変更する。 - ステップ2：変数やMixinを使う子ファイルで
@use "mixin" as *;を宣言する。 - ステップ3：SP用ファイルなど、条件分岐していたファイル側で
@mediaクエリを記述する。 - ステップ4：除算
/は@use "sass:math";を宣言し、math.div()に書き換える。
最初は少し戸惑うかもしれませんが、@useルールに慣れることで、より堅牢で管理しやすいCSS設計が可能になります。ぜひこの機会に、お使いのプロジェクトのSass環境を見直してみてはいかがでしょうか。
参考サイト（さらに詳しく知りたい方へ）
今回の移行に関して、以下のサイト様も大変参考になります。
よくある質問（FAQ）
Q1: なぜ今、@import から @use に移行する必要があるのですか？
A1: Sassの主要なコンパイラが「Dart Sass」に移行したためです。@importルールは、読み込んだ変数やMixinが全てのファイルで利用可能になる「グローバル汚染」を引き起こしやすく、大規模なプロジェクトでは意図しないスタイルの上書きが発生する原因となっていました。@useは、ファイルごとに必要なモジュールだけを明示的に読み込むため、この問題を解決し、より安全で予測可能なCSS設計を可能にします。@importは公式に「非推奨」とされており、将来的には廃止が予定されているため、早めの移行が推奨されます。
Q2: @use にしたら、今まで使えていた変数（$mainColor など）がエラーになりました。
A2: それは@useの「名前空間」が原因です。例えば、@use "variables"; のように読み込んだ場合、変数は variables.$mainColor のように「ファイル名（名前空間）」を付けて呼び出す必要があります。もし従来通り $mainColor と呼び出したい場合は、記事のステップ2で解説したように @use "variables" as *; と記述してください。これにより、名前空間なしで変数やMixinにアクセスできるようになります。
Q3: math.div() に書き換えるのが面倒です。もっと簡単な方法はありますか？
A3: Sass公式が提供している「Sass Migrator」という移行ツール（Node.js環境で実行）を利用すると、プロジェクト内の /（除算）や @import を自動で math.div() や @use に一括変換できる場合があります。ただし、プロジェクトの構成によっては手動での調整が必要になることも多いため、まずは小規模なファイルで試してみるか、この記事で解説した手動での書き換えルールを理解しておくことをお勧めします。