🔹 1. 採用 7–1 Pattern (最常見的 SCSS 架構)

所謂 7–1 pattern 就是 7 個資料夾 + 1 個入口檔案。
目的是把 樣式依用途切開，避免一坨大檔案。

建議結構如下：
scss/
│── abstracts/ # 抽象層：變數、函式、mixin，不會直接輸出 CSS
│── base/ # 基礎樣式：reset、typography、全域設定
│── components/ # 元件：button、card、navbar
│── layout/ # 版面配置：header、footer、grid、sidebar
│── pages/ # 頁面專屬樣式：home.scss、about.scss
│── themes/ # 主題相關：dark.scss、light.scss
│── vendors/ # 外部套件覆寫：第三方 library
│── main.scss # 入口檔：負責匯入上面所有檔案

🔹 2. 檔案命名規範

部分檔案 (Partial files)：在檔名前加底線 _，避免被單獨編譯成 CSS。
例如：_variables.scss, _button.scss。

模組化命名：照功能拆，而不是亂取名字。
✅ button.scss
❌ style1.scss

🔹 3. 匯入規範

在 main.scss 統一管理匯入，不要每個人都在 JS 裡隨便 import：

SCSS
// main.scss
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'layout/grid';
@use 'components/button';
@use 'components/card';
@use 'pages/home';

👉 這樣 main.scss 就像「總樞紐」，避免團隊裡有人忘記 import。

🔹 4. 模組化原則

1.元件化 (Component-based)
一個 SCSS 檔只處理一個元件。
例：_button.scss 只管 button，不要順手寫 navbar。

2.可重複使用 (Reusable)
抽離常用的變數、顏色、排版，放進 abstracts/。

SCSS
// abstracts/_variables.scss
$primary-color: #3498db;
$spacing-sm: 8px;
$spacing-md: 16px;

3.避免深層巢狀
SCSS 巢狀最多建議 3 層，否則日後很難維護。

SCSS
// ❌ 壞例子
.navbar {
  ul {
    li {
      a {
        span {
          color: red;
        }
      }
    }
  }
}

🔹 5. 團隊開發時的小技巧

-規範 BEM 命名法 → 讓 class 名稱可讀且一致：

.card { }
.card__title { }
.card--highlight { }

**-Lint 工具：**安裝 stylelint
搭配 stylelint-scss，自動檢查縮排/命名/巢狀。

**-共用 Style Guide：**在 README 或 Confluence 寫下「怎麼新增一個元件樣式」、「資料夾怎麼放」→ 新人就不會亂來。

🎯 總結

用 7–1 架構分資料夾：abstracts, base, components, layout, pages, themes, vendors, main.scss。

一檔一責任：每個 SCSS 檔只管一件事。

匯入統一走 main.scss，不要亂 import。

命名統一（建議 BEM），配合 Lint 工具確保一致性。