上一篇已經在 Visual Studio 裡建立好 SCSS 資料夾，也整理出主要入口和 Partial：

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

做到這裡時，我又想到一個問題：

CSS 本來就可以寫樣式，為什麼還要多用 SCSS？

我以前在 React 專案裡已經用過 SCSS，所以不是第一次看到變數、巢狀和拆分檔案。

但以前比較常直接跟著專案原本的方式寫，沒有特別去比較：

CSS 和 SCSS 到底差在哪裡？

而且這次換到 C# MVC 專案後，SCSS 的處理方式和 React 也不太一樣。

所以在正式設定 Web Compiler 前，我先把這幾個問題整理清楚。

SCSS 不是拿來取代 CSS

先講結論：

瀏覽器最後看得懂的還是 CSS。

SCSS 是開發時使用的寫法，完成後還是要先經過編譯工具，轉成 CSS 才能交給瀏覽器。

開發人員撰寫 SCSS
↓
編譯工具處理
↓
產生 CSS
↓
瀏覽器載入 CSS

所以不是：

CSS 已經過時
↓
現在改成直接使用 SCSS

而是：

開發時使用 SCSS
↓
最後仍然輸出成 CSS

如果網站很小，樣式也不多，直接寫 CSS 完全沒有問題。

使用 SCSS 也不會讓網站自動跑得比較快。

它主要是讓開發人員在整理和維護樣式時比較方便。

SCSS 可以使用變數

假設網站的主色是：

#3366ff

直接寫 CSS 時，可能會在不同地方重複使用：

.header {
    background-color: #3366ff;
}

.button {
    background-color: #3366ff;
}

.link {
    color: #3366ff;
}

如果之後主色要修改，就要找到每個使用這個色碼的位置。

使用 SCSS 時，可以先建立變數：

$main-color: #3366ff;

其他樣式再使用這個變數：

.header {
    background-color: $main-color;
}

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

.link {
    color: $main-color;
}

之後只要修改：

$main-color: #28a745;

所有使用 $main-color 的地方，在重新編譯後就會一起更新。

修改一個變數
↓
重新編譯 SCSS
↓
使用這個變數的樣式一起改變

這也是上一篇會建立 _variables.scss 的原因。

像是網站的：

• 主色
• 文字顏色
• 邊框顏色
• 常用間距
• 圓角大小

都可以集中放在變數檔裡，之後比較方便統一管理。

SCSS 可以使用巢狀寫法

直接寫 CSS 時，父子選擇器常常會一直重複：

.menu {
    display: flex;
}

.menu a {
    color: #333;
}

.menu a:hover {
    color: #3366ff;
}

使用 SCSS 時，可以把相關樣式放在一起：

.menu {
    display: flex;

    a {
        color: #333;

        &:hover {
            color: #3366ff;
        }
    }
}

這裡的：

&:hover

最後會被編譯成：

.menu a:hover

這樣在閱讀時，可以直接看到 .menu 裡面的連結和 hover 樣式，不用一直重複寫 .menu a。

不過巢狀也不是越深越好。

像這樣一直包下去：

.page {
    .content {
        .card {
            .header {
                .title {
                }
            }
        }
    }
}

最後產生的選擇器會很長，之後想覆蓋樣式也可能更麻煩。

所以 SCSS 提供巢狀寫法，但還是要控制層級。

SCSS 可以把樣式拆開管理

上一篇建立了這些 Partial：

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

如果全部都寫進同一個 CSS 或 SCSS，專案一大就會很難找。

例如所有內容混在一起：

共用顏色
按鈕
表單
Header
Sidebar
彈跳視窗
首頁
會員頁面

想改一顆按鈕時，可能要先在幾千行裡面搜尋。

拆成不同檔案後，就能按照用途找：

按鈕樣式
↓
_buttons.scss

頁面版面
↓
_layout.scss

共用變數
↓
_variables.scss

最後再由 styles.scss 集中引入：

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

多個 Partial
↓
styles.scss 統一引入
↓
編譯成 CSS

這對頁面多、元件多，或需要多人一起維護的專案會方便很多。

那 CSS 現在不是也能做很多事嗎？

查資料時很容易看到一句：

現在 CSS 也有變數和巢狀功能，還需要 SCSS 嗎？

確實，現在 CSS 本身已經比以前強很多。

例如 CSS 也能建立變數：

:root {
    --main-color: #3366ff;
}

.button {
    background-color: var(--main-color);
}

所以不能說：

只有 SCSS 才能使用變數。

比較精準的說法是，SCSS 已經有一套成熟的變數、拆檔和編譯方式，而很多既有專案也早就建立在這套架構上。

公司目前的專案既然已經使用 SCSS，我要做的不是爭論 CSS 和 SCSS 誰比較厲害，而是先看懂現在的樣式怎麼整理和編譯。

畢竟屎菜鳥第一天進專案，就跟前輩說要把整套 SCSS 移除，應該很快就可以回家了 XD

React 專案和 C# MVC 專案的 SCSS 有什麼不同？

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

例如：

$main-color: #3366ff;

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

    &:hover {
        opacity: 0.8;
    }
}

放在哪一種專案裡，SCSS 語法基本上都是一樣的。

真正不同的是：

誰負責把 SCSS 編譯成 CSS，以及最後怎麼把 CSS 載入網頁。

React 專案怎麼處理 SCSS？

我以前在 React 專案裡，通常會在 JavaScript 或元件中引入 SCSS：

import "./styles/main.scss";

接著由專案使用的建置工具處理，例如 Vite 或 Webpack。

JavaScript 或 React 元件
↓
import main.scss
↓
Vite、Webpack 等工具處理
↓
產生瀏覽器可以使用的 CSS

以前比較像是：

把 SCSS import 進來
↓
啟動專案
↓
畫面就有樣式

中間的編譯流程已經被工具包起來，所以我不一定會特別注意它。

不過 React 本身並不負責編譯 SCSS，還是要看專案使用哪個建置工具，以及有沒有安裝 Sass 相關套件。

C# MVC 專案怎麼處理 SCSS？

目前這個 C# MVC 專案，不是使用 React 的建置流程，而是使用前面安裝的 Web Compiler。

styles.scss
↓
Web Compiler 編譯
↓
產生 styles.css
↓
_Layout.cshtml 載入 styles.css
↓
瀏覽器顯示樣式

_Layout.cshtml 最後載入的是編譯後的 CSS：

<link rel="stylesheet" href="~/css/styles.css" />

不是直接載入：

<link rel="stylesheet" href="~/scss/styles.scss" />

兩邊整理起來大概是：

所以不是重新學一套「C# 版本的 SCSS」。

只是把原本會的 SCSS，接到另一套開發工具和專案流程裡。

我實際確認了什麼？

這篇不是要把 SCSS 的全部功能學完。

我主要確認的是：

SCSS 最後還是要變成 CSS
↓
SCSS 可以使用變數和巢狀寫法
↓
樣式可以拆成多個 Partial
↓
React 和 MVC 使用的 SCSS 語法相同
↓
但編譯工具和載入方式不同

我也回到自己的專案確認：

• React 專案在哪裡 import SCSS
• MVC 專案裡的主要入口是哪一個
• _Layout.cshtml 最後載入哪一份 CSS
• 現在的 SCSS 資料夾有哪些 Partial

這樣比只列一大串 SCSS 功能，更能接到現在實際在做的專案。

這篇先記住什麼？

CSS 本身就可以完成網站樣式，使用 SCSS 不是必要條件。

SCSS 主要是讓開發時更方便整理和維護，例如：

使用變數
使用巢狀結構
拆分 Partial
集中管理樣式入口

React 專案和 C# MVC 專案使用的 SCSS 語法基本上一樣，差別主要在編譯和載入流程。

React 專案
SCSS
↓
Vite、Webpack 等工具
↓
CSS

目前的 C# MVC 專案
SCSS
↓
Web Compiler
↓
CSS
↓
_Layout.cshtml

目前 SCSS 資料夾、Partial 和主要入口都準備好了。

接下來還要告訴 Web Compiler，要編譯哪一個 SCSS，以及產生的 CSS 要放在哪裡。

下一篇就來看 compilerconfig.json。