今天要介紹的是讓我跳坑後完全回不去CSS大坑的Sass/Scss。這可是個好東西啊，強烈建議各位在前端排版跟CSS雜亂（？）程式碼層級跟瀏覽器可使用的CSS程式碼中努力掙扎的工程師們使用，包準你跳坑後完全不想出坑，待好待滿（然後在坑底對世界呼喊大家一起跳坑喔喔喔）。
然後這也是我前一個部落格開滿600天的慶祝坑，轉眼間就這麼多天了，時光飛逝阿。
1.簡介CSS
在介紹何謂Sass/Scss前，先說說何謂CSS。
CSS（Cascading Style Sheet），Wiki中文翻譯為「層疊樣式表」，是一種使用於網頁前端，專門用來美化網頁內容的一種程式語言。
簡單來說，網頁上眼睛所及的一切，基本都在css樣式的設定下，經過瀏覽器的處理並呈現在我們的眼前，其中當然還有諸多根據瀏覽器所出現的限制（萬惡的IE），這就不在本篇討論的範圍了，有興趣各位可以上網查查，或是等我寫（挖坑
2.簡介Sass
設計者：Hampton Catlin
實作者：Natalie Weizenbaum、Chris Eppstein
主要實作語言：Ruby
上市時間：2007年
作業系統：跨平台
常用文件擴展名（副檔名）：.sass、.scss
其他資料可往維基百科前進：Sass維基百科
3.何謂Sass / Scss？
Sass（Syntactically Awosome Stylesheets）是以Ruby撰寫，用來撰寫CSS樣式表的一種方法，最初是由Hampton Catlin設計並由Natalie Weizenbaum進行開發。
在開發最初版本後，Weizenbaum和Chris Eppstein繼續進行Sass功能的擴充，最終成了今日所見的Sass。
除了不同於CSS的語法架構外，能使用在CSS裡頭沒有的邏輯運算與變數，甚至是數學運算等，在一定程度上的確減少了前端工程師耗在CSS上的開發時間。
嗚光是有變數這一點，就足夠讓我從CSS跳到Sass/Scss了，更別提還有像if-else的邏輯判斷。
4.Sass / Scss差別？
新舊而言，Sass較舊，Scss較新；結構而言，兩者差不多，唯一差別在語法結構。Sass屬於「縮排結構」，與Haml類似，利用縮排代表子代父代關係，結尾無須分號，檔案副檔名為.sass。Scss則是像CSS，屬於「巢狀結構」，使用大括號包住子代元素，元素結尾需分號，檔案副檔名為.scss。
因為是巢狀結構，因此一段CSS會是合法的Scss（運作成功），但絕不是一個合法的Sass。
就像這樣：
5.Sass / Scss旅程
以上的簡易介紹有沒有讓各位有那麼一咪咪想跳坑啊？跳吧跳吧別猶豫，絕對不會後悔的！還在猶豫的同學可以先繼續往下我們的旅程再決定要不要跳坑喔。
Leave a Reply