使用 scss 動機

切版一般常使用 css 搭配 html，為什麼還要用 scss 呢？
我覺得原因有幾點：

1. 如果網頁頁面數量多了話，scss 可以更清楚的知道層級關係
2. 建立習慣後，scss 可以更快速的重複使用（組成物件）
3. 計算、前綴 --自動生成、
4. 用資料夾分類，如果頁面量大，可以快速找到
5. 背景漸層變數 css 還沒辦法完全取代，像是要做 n 種緞帶上的漸層，就可以事先寫好

	background: linear-gradient(to right, $start 0%, $end 100%);}

5. 可以知道 bootstrap4,5 怎麼寫（不過我都還沒去認真看過就是了）

前提

不過這前提是個人使用怎麼樣都開心，但如果要共同作業了話，需要事先和同事有一定共識，共同知道規則！
如果規則不同，或自己忘記，會漸漸成為一場維護災難，所以單純的寫 css 也不見得不好，因為單純直覺！
而且現在 css 也可以使用簡單的變數，像是共用主題色，就很方便。

:root {
  --themeColor: #009ded;
}

scss 寫起來大概長這樣（盡量不要包三層以上）

nav {
    background: #cccccc;
    li {
    border-bottom: 1px solid #ffffff;
    }
    a {
        color: blue;
        &:hover {
            color: red;
        }
    }
}

所需工具

• 參考資源
• compiler 工具

參考資源，其實現在已經很多人介紹了，我就不再提供，而我現在最常看的資源是官網，最不會錯，只是是英文老花需要放大一點（？

這邊就筆記一下工具。

<官網上，左邊是介面工具，按鈕點選就可以生成 css。右邊是用 CLI 也就是 Command Line命令列介面，mac是 Terminal >
我是設計師，加上前輩教的，最直覺是使用介面工具的 prepros
剛開始用得很開心，直到某天 prepros，當機壞掉了!?

prepros 補充更新：因為現在有在維護，且支援更新的是 dart sass，可以從下載版本和這邊prepros 版本確認，prepros 用的版本 dart sass 有沒有更新。

那之後我就開始嘗試用 CLI... 踏上不歸路(?

那因為我是用 mac 加上之前工程師有幫我裝 Homebrew，所以我是用 homebrew 安裝。
先 cd 到專案資料夾，複製下面這段到 CLI 上安裝

brew install sass/sass/sass

更多規則說明

sass 或 scss 也適用的規則說明

其實用 CLI 一開始只要知道這段

sass --watch input.scss output.css

<不要一直 --watch (監聽你的檔案，更新1次就自動更新) 按 ctrl + c 可以離開>

compile 過後吃到甜頭，看到一點成果，就會覺得很有趣了！