SASS 模組
本文將說明 SASS 模組。
我們將說明如何使用 @use 和 @forward 來模組化 SASS，以及如何重複使用變數、混合、函式、主題設定和公開 API。
YouTube Video
SASS 模組
SASS 的模組系統有助於明確限定樣式範圍，並提供易於重用和維護的設計。
模組的基本概念
SASS 模組解決了舊有 @import 方式下的全域命名空間污染與相依性不明確等問題。每個檔案會作為一個模組載入，具有自己的命名空間，只有明確導出的項目才可被其他檔案存取。
範例檔案結構
首先，這是一個實際專案結構的範例。下面是小型設計系統的範例。
1styles/
2├─ _variables.scss
3├─ _mixins.scss
4├─ _functions.scss
5├─ components/
6│ ├─ _button.scss
7│ └─ _card.scss
8├─ utilities/
9│ └─ _helpers.scss
10└─ main.scss- 這樣的結構便於模組化，也利於測試和替換部分元件。
- 部分（partial）檔案會在檔名開頭加底線。
@use 的基礎
@use 用來載入一個模組，並自動提供命名空間。這可以避免名稱衝突並明確指示來源模組。
1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;- 這是一個只定義變數的簡單檔案。模組中發布的變數可以直接透過
@use參照。
1// main.scss
2@use 'variables';
3
4.example {
5 color: variables.$primary-color;
6 padding: variables.$padding-base;
7}- 這裡以
variables.這個命名空間來參照variables模組。這種方式可以明確顯示每個項目的來源。
縮短或別名命名空間
可以使用 as 來縮短命名空間。
1@use 'variables' as vars;
2
3.btn {
4 color: vars.$primary-color;
5}- 這是使用簡短別名
vars匯入variables的範例。可根據是否重視可讀性或輸入效率來選擇命名。
混合（Mixin）定義
mixin 和函式也可以在模組中定義並使用。註解遵循專案慣例能提升清晰度。
1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4 width: 100%;
5 margin-left: auto;
6 margin-right: auto;
7 max-width: $max-width;
8}- 本檔案定義了一個用於容器的 mixin。這個 mixin 可接收參數並提供預設值。
1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5 @include m.container(1000px);
6}- 這裡是用
@include使用 mixin 的範例。
定義函式
函式用於回傳數值，可於模組中定義並重複使用。將設計數值的計算封裝於函式中，能讓樣式更穩定且更易維護。
1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6 @return math.div($px, $base) * 1rem;
7}- 此檔案定義了一個將像素值轉換為 rem 的函式。同時也指定了預設的基準值。
1// main.scss
2@use 'functions' as f;
3
4.title {
5 font-size: f.to-rem(24);
6}- 以下是透過
@use呼叫函式並將結果應用到樣式的範例。
模組導出與 @forward（API 設計）
當需要將多個內部檔案公開時，可以用 @forward 建立一個「公開 API」。
1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';- 可以將多個內部檔案歸為單一進入點，集中提供公開 API。這樣消費者只需匯入一個進入點即可取得所需所有功能。
1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5 color: ds.$primary-color;
6 @include ds.container();
7}variables和mixins的內容可以統一經由index取得。@forward讓index成為對外公開的界面。
用 @forward 的 show / hide 來控制 API
若只想公開特定變數，可以使用 show 或 hide 選項。
1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;- 加上
!default可以讓公開的值在外部進行覆寫。
1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';- 結合
show與@forward可以僅公開必要的 API 項目。內部使用的變數與函式將不會對外暴露。
讓模組可設定（使用 with）
如果在模組裡用 !default，匯入端可以透過 with 來覆寫預設值。
1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6 background-color: $brand-color;
7 border-radius: $radius;
8}- 使用
!default定義預設值的模組，可借由with傳入設定。
1// main.scss
2@use 'theme' with (
3 $brand-color: #2288ff,
4 $radius: 8px
5);
6
7.my-btn {
8 @include theme.button-style();
9}@use中的with可於匯入時複寫模組內的預設變數。這對於主題切換很實用。- 注意
with只在匯入當下生效，之後無法再變更其值。
實際範例：按鈕元件（完整範例）
讓我們運用模組來設計按鈕樣式。首先，將變數及 mixin 區分成獨立模組。
1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;- 這裡定義了按鈕的預設變數。利用
!default讓使用者能自行覆寫這些值。
1// _mixins.scss
2@use "variables" as v;
3
4@mixin btn-base() {
5 display: inline-flex;
6 align-items: center;
7 justify-content: center;
8 padding: v.$btn-padding-y v.$btn-padding-x;
9 font-size: v.$btn-font-size;
10 border: none;
11 cursor: pointer;
12}- 按鈕基礎 mixin 於此定義。分離設計有助於重複使用。
1// _button.scss
2@use 'variables' as v;
3@use 'mixins' as m;
4
5.button {
6 @include m.btn-base();
7 background: v.$btn-primary-bg;
8 color: v.$btn-primary-color;
9 border-radius: 4px;
10 transition: opacity 0.15s ease;
11 &:hover { opacity: 0.9; }
12}
13
14.button--large {
15 padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16 font-size: v.$btn-font-size * 1.25;
17}- 按鈕樣式使用
@use命名空間參照來撰寫。一個變體為.button--large被定義。
1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins- 只要匯入
button模組，即可直接使用按鈕樣式。
主題切換（使用多個主題檔）
主題可透過 with 設定切換，或建立個別主題模組並用 @use 選擇要套用的主題。
1// themes/_light.scss
2$brand-color: #0a74da !default;1// themes/_dark.scss
2$brand-color: #111827 !default;- 可將品牌顏色等設定寫在多個主題檔內，於建置或匯入時切換。
1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';- 可選擇用
with或直接在建置時匯入，例如@use 'themes/light'，來切換主題。
私有與公開（底線前綴與 !default）
在 SASS 中，檔名開頭加上底線表示這是一個部分檔案（partial）。但管理模組的導出可見性時，還是建議用 @forward 搭配 show 或 hide 進行控制。
可利用 @forward 統整公開 API，也能隱藏內部實作避免外部存取。
實務最佳實踐建議
以下是實際使用 SASS 時很有用的一些基本概念。這些規範將幫助你在開發時避免混淆並保持程式碼有條理。
- 若變數有機會成為主題設定，應加
!default。這樣使用者更容易覆寫數值。 - 模組應按職責分工，聚焦單一用途。將變數、混合及元件分離能讓管理變得更容易。
- 用
@forward管理公開內容，必要時搭配show或hide控制。明確界定對外公開項目可提升設計安全性。 - 利用命名空間明確歸屬每一個功能。可以防止與其他程式碼混淆。
- 記得
with僅於@use匯入時有效。因為事後不能再改，匯入時務必設定好。 - 將檔名加底線讓其成為部分檔案，以避免個別被編譯。這樣方便合併檔案組成更大架構。
- 在
index模組內加入範例，有助於測試與文件說明。這使得使用者更容易理解實際行為。
牢記以上重點，將有助於團隊協作管理大型專案並保持程式碼可讀性。
總結
SASS 模組系統透過命名空間、公開 API 及簡化設定來組織樣式碼。靈活運用 @use 和 @forward，能讓團隊開發、主題切換和函式庫設計都變得更容易。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。