今天要介紹的是讓我跳坑後完全回不去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