上一篇把 Web Compiler 裝好後，接下來就要開始建立 SCSS。

我以前在 React 專案裡已經用過 SCSS，所以 SCSS 語法、變數和拆分檔案這些概念並不是第一次接觸。

但現在換成 C# MVC 專案，我還是先問了程式助教：

React 專案裡的 SCSS，和 C# MVC 專案裡的 SCSS 有什麼不同？
我可以直接照以前的方式建立嗎？

畢竟要開始動公司專案了，還是先確認一下，不要覺得副檔名都叫 .scss 就直接照搬。

React 的 SCSS 和 C# MVC 的 SCSS 不一樣嗎？

先講結論：

SCSS 語法本身沒有分成 React 版和 C# 版。

例如這段 SCSS：

$main-color: #3366ff;

.button {
    background-color: $main-color;

    &:hover {
        opacity: 0.8;
    }
}

放在 React 專案或 C# MVC 專案裡，語法基本上是一樣的。

真正不同的不是 SCSS，而是：

專案用什麼工具編譯 SCSS，以及最後怎麼載入產生的 CSS。

我以前使用 React 時，通常會在 JavaScript 或元件裡引入 SCSS：

import "./styles/main.scss";

接著由 Vite、Webpack 或專案裡原本設定好的建置工具處理。

React 的 JavaScript 入口
↓
引入 main.scss
↓
Vite、Webpack 等工具處理
↓
產生瀏覽器可以使用的 CSS

當時比較像是寫完 import，啟動專案後就可以看到樣式。

很多編譯流程都已經被工具包好了。

現在的 C# MVC 專案沒有使用 React 那套建置流程，而是透過前一篇安裝的 Web Compiler 處理。

主要入口 SCSS
↓
Web Compiler 編譯
↓
產生 CSS
↓
_Layout.cshtml 載入 CSS
↓
瀏覽器顯示樣式

所以不是 React 看得懂 SCSS，而 C# 看不懂。

兩邊最後交給瀏覽器的都還是 CSS，只是負責處理 SCSS 的工具和載入方式不同。

確認這件事後，我就可以直接沿用原本學過的 SCSS 概念，只是要重新熟悉 Visual Studio 裡的操作方式。

先確認 SCSS 要建立在哪裡

在 Visual Studio 建立資料夾前，要先看清楚目前選到的是 Solution，還是真正的 Project。

前面 Day 4 已經整理過：

Solution
負責管理一個或多個專案

Project
才是真正放程式碼和檔案的地方

假設方案總管長這樣：

Solution
└── WebProject
    ├── Controllers
    ├── Models
    ├── Views
    └── wwwroot

這次要在 WebProject 裡建立 SCSS 資料夾，不是在最外層的 Solution 上新增。

建立 scss 資料夾

先在方案總管找到實際的 Project，按右鍵後選擇：

Add 加入
↓
New Folder 新增資料夾

接著把資料夾命名為：

scss

建立後，專案結構可能會變成：

WebProject
├── Controllers
├── Models
├── Views
├── wwwroot
└── scss

資料夾不一定非得叫做 scss，其他專案也可能使用：

Styles
Sass
assets/scss

如果是公司既有專案，要先看團隊原本的資料夾結構，不要教學文章看到 scss，就在專案裡另外長出一套新的架構 XD

這篇為了方便說明，先統一使用 scss。

建立主要入口 styles.scss

資料夾建好後，接著建立主要的 SCSS 檔案。

在 scss 資料夾上按右鍵，選擇：

Add 加入
↓
New Item 新增項目

如果新增項目的畫面裡有 SCSS 或 Sass 樣式表，可以直接選擇。

如果沒有，也可以建立一般文字檔，再把檔案名稱改成：

styles.scss

要注意副檔名是真的 .scss，不要不小心變成：

styles.scss.txt

如果 Windows 隱藏副檔名，畫面上可能看起來叫做 styles.scss，實際上後面卻還有一個 .txt。

建立完成後，目前的結構是：

scss
└── styles.scss

這個 styles.scss 可以作為主要入口檔，負責引入其他拆開的 SCSS。

我自己比較習慣把它叫做「總 SCSS」，比較常見的說法則是「主要入口檔」或 Entry File。

建立其他 SCSS 檔案

如果所有樣式都塞在 styles.scss 裡，專案一大還是會很難維護。

所以接著可以依照用途，建立不同的 SCSS 檔案：

_variables.scss
_buttons.scss
_layout.scss
_theme.scss

建立方式和剛才一樣：

在 scss 資料夾按右鍵
↓
Add
↓
New Item
↓
輸入檔案名稱

完成後，資料夾結構可能會長這樣：

scss
├── _variables.scss
├── _buttons.scss
├── _layout.scss
├── _theme.scss
└── styles.scss

這幾個檔案可以先這樣分工：

這只是基本範例，不是每個專案都要建立一模一樣的檔案。

專案比較大時，也可能再依照功能建立子資料夾：

scss
├── base
│   ├── _reset.scss
│   ├── _variables.scss
│   └── _typography.scss
│
├── components
│   ├── _buttons.scss
│   ├── _forms.scss
│   └── _modal.scss
│
├── layout
│   ├── _header.scss
│   ├── _footer.scss
│   └── _sidebar.scss
│
└── styles.scss

剛開始不用拆得這麼細，先看懂主要入口和其他檔案怎麼配合就好。

檔名前面的 _ 是什麼？

像這些檔案：

_variables.scss
_buttons.scss
_layout.scss

檔名前面都有 _，這類檔案通常叫做 Partial，可以理解成「部分樣式檔」。

它們各自負責整套樣式裡的一部分，通常不會自己單獨輸出成 CSS，而是由主要入口統一引入。

_variables.scss
負責共用變數

_buttons.scss
負責按鈕樣式

_layout.scss
負責頁面版面

styles.scss
負責把其他 SCSS 集中起來

所以 _ 不是單純的命名習慣，而是在表示這個檔案是提供其他 SCSS 使用的 Partial，不是主要的編譯入口。

可以先把這個結構理解成：

_variables.scss、_buttons.scss、_layout.scss
＝
分開管理的樣式檔

styles.scss
＝
負責統整其他樣式的主要入口

不過檔名前面沒有 _，也不代表它一定會被自動編譯。

Web Compiler 最後要編譯哪一個檔案，還是要看後面的設定。

先在 Partial 裡放一些內容

資料夾和檔案建立好後，可以先放一些簡單內容。

_variables.scss

$main-color: #3366ff;
$text-color: #333;
$background-color: #f5f6f8;
$border-radius: 4px;

_buttons.scss

.test-button {
    padding: 8px 16px;
    border: 0;
    border-radius: $border-radius;
    color: white;
    background-color: $main-color;
}

_layout.scss

.page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

_theme.scss

body {
    color: $text-color;
    background-color: $background-color;
}

.page-title {
    color: $main-color;
}

_theme.scss 可以先理解成放網站整體主題相關的樣式，例如：

頁面背景色
主要文字顏色
標題顏色
主題配色
深色模式

這裡先把 _variables.scss 裡定義的顏色，實際套用到 body 和 .page-title。

現在每個 Partial 都有自己的內容，接著要回到主要入口 styles.scss，把它們集中起來。

styles.scss 怎麼引入其他 SCSS？

我目前接觸的公司專案使用的是 @import，所以這篇先照實際專案裡的寫法。

在 styles.scss 裡加入：

@import "variables";
@import "buttons";
@import "layout";
@import "theme";

實際檔名明明是：

_variables.scss

但引入時通常可以省略前面的 _ 和後面的 .scss。

所以：

@import "variables";

會找到：

_variables.scss

而：

@import "buttons";

會找到：

_buttons.scss

目前的關係就變成：

_variables.scss
_buttons.scss
_layout.scss
_theme.scss
        ↓
styles.scss 使用 @import 集中引入

之後只需要把主要入口交給 Web Compiler，不用讓每一個 Partial 都各自產生 CSS。

多個 Partial
↓
styles.scss
↓
Web Compiler
↓
整合後的 CSS

引入順序有差嗎？

如果其他 SCSS 會使用 _variables.scss 裡的變數，變數檔就要放在前面：

@import "variables";
@import "buttons";
@import "layout";
@import "theme";

假設 _buttons.scss 裡使用：

$main-color

但 variables 還沒有先引入，就可能出現找不到變數的錯誤。

如果不同檔案裡寫了相同的 CSS 選擇器，後面產生的規則也可能蓋掉前面的規則。

所以 styles.scss 不只是把所有檔案列出來，也會影響樣式最後組合的順序。

實際要怎麼排序，還是要依照公司專案原本的架構。

Partial 放在子資料夾怎麼引入？

如果 SCSS 再往下分類：

scss
├── base
│   └── _variables.scss
├── components
│   └── _buttons.scss
├── layout
│   └── _header.scss
└── styles.scss

styles.scss 裡的路徑也要跟著調整：

@import "base/variables";
@import "components/buttons";
@import "layout/header";

如果檔案放在：

components/_buttons.scss

卻只寫：

@import "buttons";

Sass 可能會找不到它。

所以建立完結構後，還要確認檔名、單複數和相對路徑有沒有對上。

這部分和以前在 React 裡處理 import 路徑很像，少打一層資料夾，檔案就直接失蹤 XD

比較新的 Sass 不是使用 @use 嗎？

查資料時也可能看到：

@use "variables";
@use "buttons";

現在 Sass 比較建議使用 @use 和 @forward，但 @use 和 @import 的規則並不完全一樣，不能只把指令名稱直接替換掉。

像是變數命名空間、載入方式和作用範圍都有差異。

我目前的公司專案使用的是 @import，所以這篇先照實際專案的架構處理，不會因為看到比較新的語法，就自己把整個既有專案全部改掉。

屎菜鳥還是先不要擅自重構全世界比較安全 Q

SCSS 都建立好了，為什麼還沒有 CSS？

做到這裡後，目前已經完成：

scss
├── _variables.scss
├── _buttons.scss
├── _layout.scss
├── _theme.scss
└── styles.scss

styles.scss 裡也有引入其他 Partial：

@import "variables";
@import "buttons";
@import "layout";
@import "theme";

但專案裡不一定會立刻出現：

styles.css

因為目前只完成了 SCSS 資料夾、主要入口、Partial 和檔案之間的引入關係，還沒有告訴 Web Compiler 要編譯哪個 SCSS，以及產生的 CSS 要放在哪裡。

Web Compiler 已經來上班了，但還沒收到正式的工作內容 XD

AI 在這一篇幫了我什麼？

這次我先問了：

React 專案和 C# MVC 專案裡的 SCSS 有什麼不同？
原本學過的 SCSS 能不能直接使用？
Visual Studio 要怎麼建立 SCSS 資料夾？
主要入口和 Partial 要怎麼安排？
為什麼引入時不用寫 _ 和 .scss？
Partial 放進子資料夾後，路徑要怎麼寫？

確認 SCSS 語法本身沒有分成 React 版和 C# 版後，我就把原本學過的概念接到目前的 MVC 專案裡。

這次實際完成的步驟是：

確認 React 和 MVC 的 SCSS 差異
↓
在 Project 建立 scss 資料夾
↓
建立 styles.scss
↓
建立 _variables.scss、_buttons.scss 等 Partial
↓
在 styles.scss 引入其他檔案
↓
確認檔名和相對路徑

這篇先記住什麼？

React 專案和 C# MVC 專案使用的 SCSS 語法基本上一樣，差別主要在編譯工具和最後載入 CSS 的方式。

這次建立的基本結構是：

scss
├── _variables.scss
├── _buttons.scss
├── _layout.scss
├── _theme.scss
└── styles.scss

檔名前面有 _ 的 SCSS 通常叫做 Partial，各自負責一部分樣式，通常不會自己單獨輸出 CSS。

styles.scss 則作為主要入口，把其他 Partial 集中引入：

@import "variables";
@import "buttons";
@import "layout";
@import "theme";

目前已經把 SCSS 架構建立好了，但還沒有正式產生 CSS。

接下來還要告訴 Web Compiler，要編譯哪一個 SCSS，以及 CSS 要輸出到哪裡。