【Sassガイド】@use と as * を理解してモダンなSCSS設計を実現する

Sassの公式が@useを強く推奨し、従来の@importは非推奨となりました。しかし、「@useの名前空間が面倒くさい」「as *ってどう使えばいいの？」と悩んでいる方も多いのではないでしょうか。

この記事では、@useの基本から、as *を使ったモダンなSCSS設計のベストプラクティスまで、実例を交えて徹底的に解説します。これさえ読めば、あなたのSassコードは一気に進化します。

1. なぜ@importは非推奨になり、@useになったのか？

まずは、@importの何が問題で、@useがそれをどう解決したのかを見てみましょう。

旧方式：@import（非推奨の理由）

SCSS

// style.scss
@import "color"; // color.scss を読み込む

.button {
  background: $main-color; // 名前空間なしで直接使える
}

@importの最大の問題点は、読み込んだファイル内のすべての変数やMixinがグローバルに展開されてしまう点です。

新方式：@use（モダンな設計）

SCSS

// style.scss
@use "color"; // colorモジュールを読み込む

.button {
  background: color.$main-color; // 必ず「名前空間.」が必要
}

@useは、読み込んだファイルの内容をモジュールとして扱い、必ずファイル名と同じ名前空間（例: color.）を付けてアクセスするよう強制します。

2. @useの3つの使い方と使い分け

@useは、記述の「シンプルさ」と「安全性」に応じて、3つのパターンで使い分けることができます。

パターン1：デフォルト（安全性最優先）

SCSS

@use "color";

.header {
  background: color.$main-color; // ← 記述が長いが、最も安全
}

• 特徴: ファイル名（color）がそのまま名前空間になります。
• 用途: Sassの組み込みモジュール（sass:mapなど）や、外部ライブラリを読み込む際に推奨されます。

パターン2：asで名前空間を短縮（利便性向上）

SCSS

@use "color" as c; // 名前空間を「c」に短縮

.header {
  background: c.$main-color; // ← 記述量を少し減らせる
}

• 特徴: 名前空間を好きな短いアルファベット（例: c、m）に指定できます。
• 用途: 記述を短くしたいが、まだ衝突のリスクを避けたい場合に有効です。

パターン3：as *でグローバル名前空間（記述のシンプルさ最優先）

SCSS

@use "color" as *; // 名前空間を削除

.header {
  background: $main-color; // ← 旧@importと同じ感覚で直接使える！
}

• 特徴: ワイルドカード（*）を使うことで、名前空間が不要になります。
• 用途: プロジェクト固有の変数やMixin（後述）を読み込む際に最もおすすめです。

3. 【実践】as *はいつ使うべきか？ベストプラクティス

as *は便利ですが、無秩序に使うと@importと同じ問題を引き起こします。「グローバル展開しても安全なもの」に絞って使うのがベストプラクティスです。

✅ as *を使うべきケース：プロジェクト固有のモジュール

カラー変数やフォント変数、プロジェクト専用のMixin（レスポンシブ関数など）は、他のプロジェクトと混ざることがないため、as *を使って簡潔に記述します。

使用例 (_page-front.scss)

SCSS

@use "color" as *; // OK: プロジェクト固有変数
@use "font" as *;  // OK: プロジェクト固有変数
@use "responsive" as *; // OK: プロジェクト固有mixin

.header {
  background: $main-color;    // 名前空間不要でスッキリ
  font-family: $font-m1c;     // 名前空間不要でスッキリ
  
  @include mq(tab) {          // mq()も名前空間不要
    font-size: 28px;
  }
}

❌ as *を使わないケース：Sass組み込みモジュール

sass:mapやsass:mathなどのSassに最初から入っている関数は、必ず名前空間をつけて使用します。

SCSS

// style.scss
@use "sass:map";
@use "sass:math";

.example {
  $data: (a: 1, b: 2);
  $value: map.get($data, a);   // ✅ map. を付ける
  $result: math.div(100, 3);  // ✅ math. を付ける
}

• 理由: これらの関数は名前が短いため、将来的に自分で作ったMixinや他のライブラリの関数名と衝突する可能性が高いからです。名前空間を付けることで、コードの出所が明確になり、安全性が保たれます。

4. 実践：レスポンシブMixinの設計（完全版）

@use "responsive" as *; の恩恵を最も受けるレスポンシブMixinのコードを見てみましょう。

_responsive.scss

SCSS

@use "sass:map"; // 組み込みモジュールは名前空間を保つ

// ブレークポイント定義
$breakpoints: (
  "sp": "screen and (max-width: 767px)",
  "tab": "screen and (min-width: 768px)",
  // ...
);

// レスポンシブmixin: @use "responsive" as *; で使えるようにする
@mixin mq($breakpoint: sp) {
  @media #{map.get($breakpoints, $breakpoint)} {
    @content;
  }
}

使用例：テンプレート側での圧倒的なシンプルさ

SCSS

@use "responsive" as *; // as * で読み込む

.header {
  height: 60px;
  
  // タブレット以上
  @include mq(tab) { // ← シンプル！
    height: 80px;
  }
}

比較表：@useの構文まとめ

結論：モダンSass設計の推奨パターン

今後、保守性の高いSCSSを書くためには、この使い分けが必須です。

1. プロジェクトの基盤変数/Mixin（color, font, responsiveなど）
   • → @use "file" as *; で読み込み、シンプルさを追求。
2. Sass組み込みモジュール（sass:map, sass:mathなど）
   • → @use "sass:module"; で読み込み、名前空間を保ち安全性を確保。

このルールに従うだけで、あなたのSCSSコードは一気にモダンで管理しやすいものに進化します。モダンなSass設計で、気持ちよく開発を進めていきましょう！