【Sass】我要重新學Sass!

第一篇文章就決定來寫Sass!

因為工作的關係，斷斷續續會碰到一些些前端相關的工作，雖然不多。
而第一個建造的前端網站為活動的網站，為了應付這項工作，因此很快速地看了線上教學，很匆忙的吸收，很沒基礎的蓋了第一個網站。

而當初課程簡單的講解css的概念之後，就教了Sass，之後也一直用Sass繼續教課。
所以我在做第一個網站的時候，就用Sass寫了，
但是!!!
我幾乎完全沒有使用到Sass的精隨阿!!!大概只有3%吧(可能更少!?
在還沒有認真學Sass前，平常大概只會用變數設定顏色跟寫巢狀結構而已。
雖然知道有很多其他功能，卻也沒再研究，用的寫法則是sass不是scss。

那開始記錄Sass學習筆記(非本科系+自學前端中，若錯誤部分還煩請告知我，感謝><)

選擇sass的好處是什麼？

可以透過變數、建立模組等來可以有系統性的去管理css
在較大型的專案中，可以更好去管理與維護。比如可以將不同元件、功能等寫成不同的sass，之後透過@import這個功能來去匯入需要的檔案。
減少重複套用一樣的樣式
將常常忘記的功能做成模組。比如使用@mixin，常忘記的功能組合命名，需要使用的時候叫出來。

使用Sass要注意什麼?一般網頁讀不懂sass的!

一般的瀏覽器中其實只能讀懂css，如果丟一個scss的附檔名，瀏覽器是看不懂的，因此需要將sass編譯成css之後才能撰寫。
那要如何編譯呢?

軟體協助，我個人則是都用prepros(順便編譯pug!)
使用編譯器的外掛(像VScode有Live Sass Compiler)
gulp、webpack

透過編譯的處理，像是我使用prepros，它也會順便將給不同瀏覽器獨特的前綴詞(Autoprefix Supported)，實在是相當的方便!

prefix補充
-webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser)
-moz- (Firefox)
-o- (old pre-WebKit versions of Opera)
-ms- (Internet Explorer and Microsoft Edge)

sass、scss 我要選哪一個?

Sass有兩種寫法，為scss與sass，由於我最早看課程的老師都用sass寫法，因此我也一直這麼用，沒太特別多想。
sass在格式上相對嚴謹，不用書寫在css看到的{}與;，並利用tab來做排版，排出父子關係的巢狀結構
scss是後來發展的新寫法，也與css原本比較相似，也可以直接複製貼上原本的css(方便阿，之前也sass都在那邊補";“”，不然就是要特別轉)，而在常見的css框架-Bootstrap4，且比較有在維護，所以我也決定之後都使用scss為主!

平常看到的css

.block{
    color: red;
}
.block .img{
    width: 100%;
}

sass表示方法

.block    
    color:red
    .img
        width: 100%

scss表示方法

.block{
    color:red;
    .img{
        width: 100%;
    }
}

參考連結:
Sass官方教學