SASS中的 `@forward`
本文將解釋 SASS 中的 @forward。
我們將以淺顯易懂的方式解釋 @forward，並包含實用範例。
YouTube Video
SASS中的 @forward
@forward 是什麼？
在 SASS 的模組系統中，您應該用 @use 和 @forward 來取代 @import。@forward 是保持架構乾淨的重要功能。它是一個用來「暴露」在其他檔案中定義的變數、混入（mixins）和函數的指令。它不是單獨使用的，而是作為一個指定“從這裡使用此模組”的入口點。
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，可以集中管理在單一入口檔案中。
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 的索引檔案即可。這樣就能將其當作穩定的接口來使用，而不需關心內部結構。
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}- 這種設計即便改變變數或 mixin 的定義位置，也能更換內部結構而不需修改任何使用端代碼。
結合多個模組使用 @forward
在實際開發中，根據功能將變數、混入和函數分開是很常見的做法。@forward 可以多次撰寫，讓你可以將分散的模組整合成一個對外公開的 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）
如果多個模組中定義了相同名稱的變數或 mixin，可以在 @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）
模組可能包含只供內部實現用的變數或 mixin。通過 hide，在重新匯出時可以將它們排除，避免外部存取。
1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;採用這種配置後，$debug-color 只在模組內有效，能防止消費端誤用。
指定要匯出的成員（show）
如果只想暴露特定 mixin 或 function，請使用 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 頻道。