CSS 預處理器是什麼？

為什麼要使用 CSS 預處理器

在說明什麼是 CSS 預處理器之前，首先我們來問，為什麼要使用 CSS 預處理器呢？原生的 CSS 的哪些不便，讓懶惰成性的工程師，願意特地再花時間學習一套語法，勝過寫原生 CSS？

了解脈絡或許不會讓你的高中歷史成績變好（承認吧，當時坐在隔壁的班草 / 班花的確更能引起你的興趣），但知道原因，會讓你用 CSS 預處理時多點心安理得、多點理直氣壯，跟面試官聊起時才不會大眼瞪小眼，然後心裡暗付著，難道就是愛情～

對 CSS 的愛恨糾葛

自從 1996 年 12月，CSS1 發表以來到現在的 CSS3，CSS 一直被認為是定義網頁樣式的屬性與排版等輔助性裝飾功能，其核心機制與語法沒有太大的改變，BUT 看過韓劇的人就知道，事情的發展並非想像中的簡單，往往會朝著意想不到的複雜化發展，你愛的人有可能其實是失散多年的親哥，而從小暗戀著你的隔壁鄰居小明，就算幫你撐傘，替你擋子彈，卻還是拿他的一片真心換來你絕情的背影。CSS 一行行單純的屬性描述，雖然簡單易學易懂，然而，隨著網頁開發的複雜度提高，網頁開發者發現傳統 CSS 有一些問題難以支持大型專案的維護與重製需求，例如：

遇到大量且相同的樣式要修改，例如文字或顏色等，就要花很多時間使用查找以及取代的功能調整

// 如果老闆突然說要把整個網站中的文字改成紅色的 red，
// 你通常會要一行一行的找出來並取代，
// 但，如果有 100 行 要改呢？
// 又或者 100 行中有 20 行維持原設定 ?

div{
    color: green;
}

p{
    color:blue; 
}

命名時如果底下還有很多子元素，父元素還是需要重複打出，而且如果以後想要修改父元素名稱，要逐個找出來做調整

.person{
  ...
}

.person .avatar{
  ...
}

.person .name{
  ...
}

.person .address{
  ...
}

重複的樣式組需要寫多次，無法模組化再利用

// div1 與 div2 有很多重複的屬性，只有 font-size 不同


div1{
 width: 100%;
 heigh: 100%;
 margin: 5px;
 padding: 10px 20px;
 font-size:16px;
}

div2{
 width: 100%;
 heigh: 100%;
 margin: 5px;
 padding: 10px 20px;
 font-size:24px;
}