Sass 7-1 檔案架構：七個目錄與一個入口

Q: 為什麼載入順序很重要？

因為 CSS 是層疊的，同樣優先權時後面的贏。重置樣式必須最先、工具類別必須最後，否則會被元件樣式蓋過去。abstracts 則因為不產生 CSS，順序只影響相依關係。

Q: 用 Vue 或 React 的元件樣式還需要這個架構嗎？

components 目錄多半會消失，因為元件樣式跟著元件檔走。但 abstracts、base 與 layout 仍然需要，那些是全域的東西。

Q: 每個目錄都要有 _index.scss 嗎？

建議都要。有了它，入口檔就只需要載入目錄名稱，之後在目錄裡新增檔案也只要改該目錄的入口，不必回頭改 main.scss。

7-1 pattern 是 Sass 社群最廣為使用的目錄慣例：七個目錄放分部檔，一個 main.scss 當入口。

它要解決的問題只有一個：新人打開專案，能不能三秒內知道一段樣式該放哪。

目錄結構

scss/
├── abstracts/     變數、mixin、function（不產生任何 CSS）
├── base/          重置、字型、全域元素樣式
├── components/    按鈕、卡片、表單這類可重複使用的元件
├── layout/        頁首、頁尾、側欄、柵格
├── pages/         特定頁面才有的樣式
├── themes/        深色模式、節慶主題
├── vendors/       第三方套件的樣式與覆寫
└── main.scss      唯一不加底線的檔案

目錄	判斷準則
`abstracts`	只有定義，沒有規則，載入不會產生 CSS
`base`	沒有類別名，直接對 `html`、`body`、`a` 這類元素
`components`	可以搬到別的專案照用的 UI 零件
`layout`	頁面骨架，通常一個網站只有一份
`pages`	只有某一頁會用到，例如登入頁的特殊背景
`themes`	換膚時整組會變的東西
`vendors`	不是自己寫的，以及對它們的覆寫

main.scss

scss

// main.scss
@use "abstracts";
@use "vendors";
@use "base";
@use "layout";
@use "components";
@use "pages";
@use "themes";

七行，把整個專案串起來。

載入順序很重要

CSS 是層疊的，同樣優先權時，後面的贏。所以順序不是隨便排的：

順位	目錄	為什麼
1	`abstracts`	後面每個檔案都要用到它的成員
2	`vendors`	第三方的先進來，才能被自己的覆寫
3	`base`	重置與元素預設要在最底層
4	`layout`	骨架
5	`components`	元件覆寫骨架的預設
6	`pages`	特例覆寫通則
7	`themes`	主題要蓋過前面所有

abstracts 排第一是因為相依，不是因為層疊

它不產生任何 CSS，所以在層疊上根本不參與。放最前面是因為別人要用它的變數與混入。

工具類別若有獨立目錄，應該放在最後，理由見工具類別。

每個目錄一個 _index.scss

scss

// components/_index.scss
@forward "button";
@forward "card";
@forward "form";
@forward "modal";

有了它，main.scss 就只寫目錄名稱；之後在 components 加一個 _badge.scss，只要改這個檔案，不必回頭動 main.scss。

@forward 與 @use 的差別在這裡很關鍵，入口檔要傳遞成員，所以用 @forward。

每個元件檔要自己載入相依

scss

// components/_card.scss
@use "../abstracts" as a;

.card {
  padding: a.space(3);
  border-radius: a.$radius;

  @include a.respond-to(md) {
    padding: a.space(4);
  }
}

模組系統沒有全域這回事，用到什麼就自己載入什麼。這行看起來重複，但它讓每個檔案的相依關係一目了然。

小專案不必湊滿七個

scss/
├── abstracts/
├── base/
├── components/
└── main.scss

layout 併進 components、pages 與 themes 等到真的需要再開。空目錄比沒有目錄更礙事。

用元件框架的話

Vue、React 的元件樣式跟著元件檔走：

src/
├── styles/
│   ├── abstracts/     ← 還是要，全域共用
│   ├── base/          ← 還是要，重置與字型
│   └── main.scss
└── components/
    └── Card.vue       ← .card 的樣式寫在這裡面