Sass / Scss 教學 1
Sass 系列教學:
現今網站前端(frontend)工程師者肯定會用到的其中一種語言就是 CSS(Cascading Style Sheets),不過 CSS 其實是一種很冗笨的語言,不僅沒有變數(variables)的功能、也沒有巢狀(nested)的規則,也沒有引用(include, import)的功能,相同的設定經常會出現在不同的 CSS 區塊中,例如配色、高度、寬度、樣式,而且經常一堆 class, id 的樣式滿天飛,如果對某些配色不滿意,或是對某些樣式(stylesheet)不滿意,就可能得一個一個慢慢修改或是全域取代,要是 CSS 能夠有更像程式語言的語法與規則的話,也許將會更省事,整體的 CSS 也會更有規劃、組織。
也因為如此,Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein 還有 Alexis Sellier,這些聰明的程式設計師分別發明了 Scss/Sass 及 less 兩種 CSS Pre-Processor ,擴充了既有 CSS 的語法、規則及功能,達成變數、巢狀設計、引用等功能,只需要最小程度的遵守他們制定的語法,再透過 Sass 或 less 編譯(compile)之後,就能夠產生 CSS 檔案,你只需要維護遵循 Sass 或 less 語法撰寫出來的檔案,就可以達到前端快速開發、修改、維護的效果!