iT邦幫忙

DAY 4
5

CSS沒有極限系列 第 4

CSS沒有極限 - Sass 與 Compass(1)

在先前的幾篇,有提過好幾次的Sass以及Compass、Fire.app等工具,在這邊就來釐清這些是什麼樣的工具。


在先前的幾篇,有提過好幾次的Sass以及Compass、Fire.app等工具,在這邊就來釐清這些是什麼樣的工具。
本篇內容同步發表於http://ashareaday.wcc.tw/#2013-09-19 (建議使用Chrome瀏覽器)

Sass官方網站:http://sass-lang.com/

Q1:他是類似Dreamweaver或是什麼樣的軟體嗎?

為何有這樣的問題呢?因為一開始我真的這麼認為。我以為它是XX軟體或是XX軟體的外掛元件,只要下載安裝就可以了,而到了Sass官網,我找不到Download或是我能理解的安裝方法,發現我真的無法理解...。

以上是題外話,Sass並不是一套軟體,它算是CSS的進階語言,透過Ruby環境編譯成一般CSS,而在編寫的過程中Dreamweaver、Sublime text、Visual Studio、記事本只是編寫的工具,並不會影響到編譯後的結果。

建議對Sass有興趣的設計師或工程師,請繼續看下去,Sass是非常優秀的CSS進階語言,而入門並沒有想像中的困難。

Q2:Ruby又是什麼?

是一種程式語言,而Sass就是用Ruby所編寫,所以在Sass編譯時需要有Ruby的編譯能力。
Ruby繁體中文https://www.ruby-lang.org/zh\_tw/

Q3:Sass,為何又有人說scss?
兩者都屬於sass,而差在附檔名以及編寫方式的不同。
.sass是屬於原生的sass語法,明顯的特徵是利用縮排取代大括號。.scss後來衍生出來的語法,為了讓新一代的設計師可以承受較少的痛學習sass,所以在結構上相當類似CSS。

/*CSS Code*/
.error {
  border: 1px #f00;
  background: #fdd;
}
/*SCSS Code*/
.error {
  border: 1px #f00;
  background: #fdd;
}
/*Sass Code*/
.error
  border: 1px #f00
  background: #fdd

由以上範例可以看出SCSS其實和CSS幾乎是一樣的,而Sass就少了大括號以及分號。而我喜歡sass的簡潔,尤其是少了大括號可以增加CSS的閱讀性,但如果在專案進行時,建議與同伴們討論好要以哪一種語法執行,避免造成日後維護的困擾。

Q4:Less 又是什麼?
他也是類似sass的CSS擴充語言,不同的是sass是在Ruby環境下,而less是Javascript library。本篇不太會介紹到Less,如知詳情請參考此比較網站(http://www.hongkiat.com/blog/sass-vs-less/)。

Q5:sass 可以運用在現在的專案嗎?
由於前方有介紹到Scss的語法結構與CSS類似,只要有編譯環境後,將CSS的副檔名修改成.scss就可以開始嘗試了,而從現有的專案開始練習,也可以快速了解其優點。

Q6:Compass又是什麼?

Compass是sass的擴充語言,而其中最常使用的就是CSS3的mixin(在下一篇會介紹mixin)。

/*SCSS Code*/
.demo{
	@include border-radius(5px);
	...
}
/*Sass Code*/
.demo
	+border-radius(5px)
	...
/*CSS code*/
.demo{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	...
}

由以上範例可得知,寫一行抵別人寫5行,怎麼可能會輸?

Q7:該怎麼開始?

以正常流程來說,首先需要有Ruby環境,然後安裝Sass、Compass等等,而在這邊我推薦使用Fire.app (http://fireapp.handlino.com/),可以讓使用者快速進入Sass。當然,Sass在學習時需要許多的耐心與愛心,需要慢慢地去理解,接著去尋找其他人所了解的答案,最後在自己的能力範圍內去教導其他人使用。

以下為相關入門文章(網路文章非常非常的多,請選擇自己容易理解的去閱讀)

環境建立------
安裝ruby及sass環境 http://ashareaday.wcc.tw/#2013-09-02
使用Fire.app http://ashareaday.wcc.tw/#2013-09-03
使用Fire.app http://demo.tc/Post/757

語法教學------
30天挑戰Sass http://ithelp.ithome.com.tw/profile?id=20040221
ashareaday天天都分享ashareaday

其他相關文章------
利用 Compass / Sass 快速開發版型 http://www.slideshare.net/kurotanshi/compass-sass?ref=http://127.0.0.1:24681/


上一篇
CSS沒有極限 - 瀏覽器的戰爭
下一篇
CSS沒有極限 - Sass 與 Compass(2)
系列文
CSS沒有極限41

尚未有邦友留言

立即登入留言