Scss旅程(1) – 何謂sass/scss

今天要介紹的是讓我跳坑後完全回不去CSS大坑的Sass/Scss。這可是個好東西啊，強烈建議各位在前端排版跟CSS雜亂（？）程式碼層級跟瀏覽器可使用的CSS程式碼中努力掙扎的工程師們使用，包準你跳坑後完全不想出坑，待好待滿（然後在坑底對世界呼喊大家一起跳坑喔喔喔）。

然後這也是我前一個部落格開滿600天的慶祝坑，轉眼間就這麼多天了，時光飛逝阿。

1.簡介CSS

在介紹何謂Sass/Scss前，先說說何謂CSS。

CSS（Cascading Style Sheet），Wiki中文翻譯為「層疊樣式表」，是一種使用於網頁前端，專門用來美化網頁內容的一種程式語言。

簡單來說，網頁上眼睛所及的一切，基本都在css樣式的設定下，經過瀏覽器的處理並呈現在我們的眼前，其中當然還有諸多根據瀏覽器所出現的限制（萬惡的IE），這就不在本篇討論的範圍了，有興趣各位可以上網查查，或是等我寫（挖坑

設計者：Hampton Catlin

實作者：Natalie Weizenbaum、Chris Eppstein

主要實作語言：Ruby

上市時間：2007年

作業系統：跨平台

常用文件擴展名（副檔名）：.sass、.scss

其他資料可往維基百科前進：Sass維基百科

Sass（Syntactically Awosome Stylesheets）是以Ruby撰寫，用來撰寫CSS樣式表的一種方法，最初是由Hampton Catlin設計並由Natalie Weizenbaum進行開發。

在開發最初版本後，Weizenbaum和Chris Eppstein繼續進行Sass功能的擴充，最終成了今日所見的Sass。

除了不同於CSS的語法架構外，能使用在CSS裡頭沒有的邏輯運算與變數，甚至是數學運算等，在一定程度上的確減少了前端工程師耗在CSS上的開發時間。

嗚光是有變數這一點，就足夠讓我從CSS跳到Sass/Scss了，更別提還有像if-else的邏輯判斷。

新舊而言，Sass較舊，Scss較新；結構而言，兩者差不多，唯一差別在語法結構。Sass屬於「縮排結構」，與Haml類似，利用縮排代表子代父代關係，結尾無須分號，檔案副檔名為.sass。Scss則是像CSS，屬於「巢狀結構」，使用大括號包住子代元素，元素結尾需分號，檔案副檔名為.scss。

因為是巢狀結構，因此一段CSS會是合法的Scss（運作成功），但絕不是一個合法的Sass。

就像這樣：

一般來說我是建議使用Scss，適當的結構嚴謹不是壞事。再來就是Scss相容Css，這對專案程式碼轉換的過渡期是很重要的。

以上的簡易介紹有沒有讓各位有那麼一咪咪想跳坑啊？跳吧跳吧別猶豫，絕對不會後悔的！還在猶豫的同學可以先繼續往下我們的旅程再決定要不要跳坑喔。