- 理解實務上 Plain CSS 開發方式的侷限
- 認識 CSS 預處理器的由來以及常見預處理器如 Sass、Less、Stylus
- 認識 Sass/SCSS 這個版本名稱與副檔名 .scss
精進 CSS 的開發速度與維護能力。
Plain CSS 開發方式的侷限
- 語法重複 (poor reusability)
- 可維護性不佳
- 可讀性不佳 (poor readability)
CSS 預處理器由來
CSS 預處理器 (CSS Preprocessor) 是 CSS 語法的擴充，讓開發者能夠處理抽象邏輯，例如變數、模組、與繼承等等。
將背景顏色與字體顏色抽取成變數 $bg_color 和 $font_color，統一設定在文件上方；而右側則是「編譯」後的 plain css。
開發者在自己的開發環境裡透過預處理器，「用類似程式語言的方式設定樣式」，要交接給瀏覽器時，再編譯成底層的 CSS 語言。
較新版的 Sass/SCSS 是目前業界主流，SCSS 的全文是 Sassy CSS，副檔名為 .scss ，也是我們接下來會使用的版本。
教學中也會使用 Sass/SCSS 版本，在一般情況會直接簡稱為 Sass。
在 CodePen 環境，你只需要打開 Settings > CSS 面板，設定 CSS Preprocessor 為 SCSS
本機用 webpack 架設開發環境
Sass 編譯體驗：指令列實作
透過指令列來手工實作 Sass 的編譯流程。
編譯 (compile)
雖然 Sass 有種種好處，但瀏覽器本身並不懂 Sass，因此，我們還是必須將之編譯成 plain CSS，才能被瀏覽器接受。
編譯器 (compiler) 泛指能將 X 語言 (原始碼) 轉譯成 Y 語言 (目標碼) 的一支程式。
而 Sass 扮演了編譯器的角色，最終的目標代碼仍然是 .css 格式
Node.js 版本
安裝 Sass npm install sass@1.26.7
npm install sass@1.26.7 --force 使用 --force 參數來強制覆蓋
確認安裝成功
將 Sass 安裝於專案中，因此在呼叫 Sass 時需要加上 npx。
安裝在專案中的 Sass ，若使用 git bash 呼叫到它，需要在指令前加上 npx 才能順利進行。
當沒有在指令前加上 npx 時，預設會從 git bash 中的 $PATH 找尋 global 的套件，而這個章節的 Sass 是安裝在專案中的，因此呼叫 global 的套件時，你會在終端機上得到： bash: sass: command not found 的回覆。
- 確認是否安裝完成，which 指令會回傳設定檔的本機位置：
npx which sass - 副指令--version 會回傳版本號
npx sass --version
#### 查看內建說明書man sass // Sass 剛好沒有提供 man 指令 (man 是 manual 的意思)。 npx sass -help 或 npx sass --help
三種最常見的編譯情境，介紹 Sass 的實作指令：
編譯單一 sass 檔案成為 css 檔案
追蹤單一 sass 檔案並持續編譯成 css
追蹤資料夾並持續編譯成 css
