sass

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

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

網站:http://sass-lang.com/

其他資料可往維基百科前進: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。

就像這樣:

sass-introduce-1
[圖一]巢狀結構範例
一般來說我是建議使用Scss,適當的結構嚴謹不是壞事。再來就是Scss相容Css,這對專案程式碼轉換的過渡期是很重要的。

5.Sass / Scss旅程

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.