🚀

【FLOCSS × Sass】@use と @forward の使い分けメモ

に公開
Sass
Scss
frontend
CSS設計
flocss
tech

はじめに

FLOCSS構成でSassを使うとき、「どこで @use？」「どこで @forward？」と混乱しやすいので、まとめました。

前提

  • Sassモジュールシステム（@use, @forward）を使う構成
  • FLOCSS設計をベースにしたディレクトリ構成
  • foundation/global/ に変数・mixinなどの共通設定をまとめている
scss/
├─ foundation/
│  ├─ _reset.scss
│  └─ global/
│     ├─ _variables.scss
│     ├─ _mixin.scss
│     └─ _index.scss      ← @forwardでまとめる
├─ layout/
├─ component/
├─ project/
└─ style.scss             ← 最終的に@useで全体読み込み

@forward とは

@forward は、Sassファイルをまとめるための命令。
主に変数やmixinなどを「まとめてエクスポート」する目的で使います。

使う場所

foundation/global/_index.scss など、**「まとめる側のファイル」**で使います。

// foundation/global/_index.scss
@forward "variables";
@forward "mixin";

これで他の場所からは foundation/global だけ指定すればOK。

@use とは

@use は、Sassファイルを読み込むための命令。
たとえば最終的に style.scss で全体をまとめるときはこんな感じ

// style.scss
@use "foundation/global";
@use "layout/header";
@use "component/button";
@use "project/hero";

上記のように、global は _index.scss で @forward しているのでここでは foundation/global の指定だけで済みます。

各ファイルで変数を使うとき

各コンポーネントやプロジェクトファイルで変数を使う場合は、そのファイル内で @use を書く必要があります。

// component/_title.scss
@use "../../foundation/global";

.c-title {
  color: global.$color-primary;
}

as（エイリアス）で短く書く

毎回 global.$color-primary と書くのが面倒な場合は、as を使ってエイリアス（別名）を付けることができます。

// component/_title.scss
@use "../../foundation/global" as c;

.c-title {
  color: c.$color-primary;
}

これで global → c と短くできます。
複数ファイルで統一したい場合も、同じエイリアスにしておくと便利です。

🧭 まとめ

用途 コマンド 使う場所 役割
変数・mixinをまとめる @forward foundation/global/_index.scss エクスポート（まとめ）
ファイルを読み込む @use 各scss・style.scss インポート（利用）

💬 例：自分のよく使う構成

// foundation/global/_index.scss
@forward "variables";
@forward "mixin";

// style.scss
@use "foundation/global";
@use "layout/header";
@use "component/button";
@use "project/hero";

// component/_button.scss
@use "../../foundation/global" as g;

.c-button {
  background: g.$color-accent;
}

✅ ポイントまとめ

  • @forward は「まとめる」
  • @use は「読み込む」
  • 階層に応じてパス指定を調整

おわりに

この記事が、FLOCSSとSassを学習する時の参考になれば幸いです！

Discussion