CSS 預處理器

CSS 的問題

全域會互相干擾
同一個 html 引入不同的 css 會互相干擾，有時 debug 會不知道到底是哪個 css 檔出了問題
沒有辦法組合
共用樣式沒辦法統一處理，必須用不同選擇器，變得不好維護

有預處理器就有後處理器

SCSS or Less(預處理器)=>變成 CSS =>(後處理器)=>變成加工過後的 CSS
後處理器舉例來說可能是有些特別屬性瀏覽器不支援，那就加工一下

什麼是 CSS 預處理器

前端和其他後端或是手機 app 不太一樣的地方在於瀏覽器，因為前端是跑在瀏覽器上面，所以寫 code 就要注意到瀏覽器的支援程度，例如我想要寫最新最潮的語法，有些瀏覽器不支援怎麼辦，那就透過一些工具把新的語法轉換成舊的就好了，例如 Babel ，可以把 ES6 換成 ES5

CSS 預處理器也是類似概念

寫 CSS 常常覺得不像在寫程式的感覺，因為就是 CSS 那些語法跟規則在遵循，可是如果可以把 CSS 寫成跟程式一樣有迴圈、function、變數之類的，這樣寫起來是個很不錯的體驗。因此 CSS 預處理器就是先寫某個語法，寫完之後透過 CSS 預處理器轉換成 CSS，最後其實還是 CSS。

SCSS & SASS

SCSS 和 SASS 兩個是很相似的東西，只有一點點不一樣，但大致上語法都相似
可以直接去 SASS 官網的 learn sass
舉兩個例子簡單說明一下:

裡面會有 SCSS、SASS 兩個不同的寫法，在 variable 也只差在 {}、;

最常用可能是巢狀功能
用下面圖片裡的例子，CSS 原生寫法要分成 3 個來寫，但用 SCSS 來寫可以寫在一起，更有語意一點

實際操作 SCSS

安裝

npm install -g sass

看版本

sass --version

Preprocessing

sass --watch input.scss output.css

轉換完發現多了兩個檔案 s.css s.css.map
map 就是俗稱的 sourceMap，因為有時 compile 出來，在 debug 的時候，他只會顯示行數跟錯誤訊息之類的，如果有 sourceMap 就可以抓到你原本的程式碼是什麼

--watch
如果像上面圖片裡寫 sass input.scss output.css 那每改一次都要手動編譯一次實在太浪費時間
因此在最前面加上--watch，就會自動偵測你的 input.scss 有沒有改動，有改動就自動 compile

所以 input.scss 按下存檔後，程式自動 compile