CSS 預處理

• 理解實務上 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