SASSにおける`@forward`
この記事ではSASSにおける@forwardについて説明します。
@forwardについて、実際的なサンプルを含めてわかりやすく解説します。
YouTube Video
SASSにおける@forward
@forward とは何か
SASSのモジュールシステムでは、@importではなく、@use と @forward を使います。@forward は、設計をきれいに保つための重要な機能で、別ファイルで定義された変数やミックスイン、関数を「公開」するための命令です。自分自身では使わず、「このモジュールはここから使ってください」と窓口を作る役割を持ちます。
1@forward "variables";- このコードは「
variables.scssの中身を、他のファイルから使えるようにする」という意味になります。
@use と @forward の役割の違い
@use と @forward はどちらもモジュールを扱うための構文ですが、目的が明確に異なります。@use は「ファイル内で使う」ための命令であり、@forward は「他のファイルから使わせる」ための命令です。
1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";@useは現在のファイルの実装に必要な依存関係を表し、@forwardはそのファイルを 公開APIの入口 として機能させます。この違いを理解することは、どこで@forwardを使うかを判断する助けになります。
なぜ @forward が必要なのか
複数の Sass ファイルが増えると、@use を大量に書く必要が出てきます。@forward を使うと、1つの入口ファイルに集約できます。
1styles/
2├─ foundation/
3│ ├─ _variables.scss
4│ ├─ _mixins.scss
5│ └─ _index.scss
6└─ main.scss- この構成では、
_index.scssが「公開API」になります。
基本的な @forward の使い方
基本的な @forward の使い方を見てみましょう。
1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;- この変数を直接
@useする代わりに、@forwardでまとめます。
1// _index.scss
2@forward "variables";- この時点で、
_index.scssは中身を持たず、ただの中継点です。
@forward されたモジュールを利用する
利用する側では、個々のファイルを直接 @use するのではなく、@forward をまとめた index ファイルだけを @use します。これにより、内部構成を意識せず、安定したインターフェースとして利用できます。
1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6 background-color: foundation.$primary-color;
7}- この設計により、変数やミックスインの定義場所が変更されても、利用側のコードを一切修正せずに内部構造だけを差し替えることが可能になります。
複数のモジュールをまとめて @forward する
実務では、変数、ミックスイン、関数を、役割ごとに分割するのが一般的です。@forward は複数回記述でき、分割されたモジュールを1つの公開APIとしてまとめることができます。
以下では、ミックスインと関数のサンプルを用意し、それらを 単一のインターフェースとして外部に公開する設計を示します。
1// _mixins.scss
2// Reusable mixins for layout and components
3
4// Reset default button styles
5@mixin button-reset {
6 appearance: none;
7 background: none;
8 border: none;
9 padding: 0;
10 margin: 0;
11 font: inherit;
12 color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17 &::after {
18 content: "";
19 display: table;
20 clear: both;
21 }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26 outline: 2px dashed red;
27} 1// _functions.scss
2// Utility functions for consistent styling
3
4@use "sass:math";
5
6// Convert px to rem based on a 16px root size
7@function rem($px) {
8 @return math.div($px, 16) * 1rem;
9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13 @return math.max($min, math.min($value, $max));
14}1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";- この
indexファイルだけを外部に公開することで、内部構造を隠蔽しつつ、利用側にとって分かりやすいインターフェースを提供できます。
名前の衝突を防ぐ（as）
複数のモジュールで同じ変数名やミックスイン名が定義されている場合、@forwardにasを指定することで、公開時に名前へ接頭辞を付けて衝突を防ぐことができます。
1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;このコードにより、variables 内の $primary-color は次のような名前で公開されます。
1// foundation.$var-primary-color- この方法は、設計ルールを明示しつつ安全にスケールさせるための手法で、特に大規模プロジェクトや共通ライブラリでは欠かせないテクニックです。
不要なメンバーを隠す（hide）
モジュール内には、内部実装専用の変数やミックスイン が含まれることがあります。hide を使うと、再公開時にそれらを除外し、外部から参照できないようにできます。
1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;この設定により、$debug-color は モジュールの内部でのみ有効 となり、利用側から誤って使われることを防げます。
公開するメンバーを明示する（show）
特定のミックスインや関数だけを公開したい場合には show を使用します。公開対象を限定することで、モジュールの役割と設計の意図を明確にできます。
1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;- このように
showを使えば、どれが公式に使ってよいAPIなのかが一目で分かる設計になります。
@forward は自分では使えない
重要なポイントとして、@forward した変数は そのファイル内では使えません。
1@forward "variables";
2
3.test {
4 color: $primary-color; // Error
5}@forwardは「再公開専用」であり、「利用」は@useの役割です。
正しい役割分担の例
Sassのモジュール設計では、公開用の層（API） と 実装用の層 を明確に分けるのが理想です。@forward は公開APIを定義し、@use は実装側でそれを利用します。
1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6 color: foundation.$primary-color;
7}- この構成により、どこが公開インターフェースで、どこが内部実装なのかが明確になり、設計の見通しが良くなります。
@import との決定的な違い
@import は、読み込んだすべての定義を グローバルスコープに展開します。一方で @use と @forward は、明示的に公開し、名前空間を通してアクセスします。
1// @import (deprecated)
2// Everything is injected into the global scope
3$color: red;
4
5.button-import {
6 color: $color;
7}
8
9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14 color: foundation.$primary-color;
15}- この違いによって、意図しない上書きや依存関係の混乱を防ぎ、保守性と安全性を大きく向上させることができます。
まとめ
@forward は、保守性の高い設計を支えるための重要な機能です。「何を公開し、何を内部実装として隠すか」を意識することで、スタイル構成はより安全で読みやすくなります。@use と @forward を適切に使い分けることで、依存関係が明確になり、変更に強い設計を実現できます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。