sass

Scss旅程(2) – 何謂compass

compass-logo

介紹完Sass後,該來講講加速Sass開發的一個相當強大的Framework:compass。他是個開源的Framework,能自動將Sass或Scss編譯成Css,還可以選擇是要展開版(CSS一行一行展開,適用於開發期,好DEBUG)還是壓縮版(CSS程式碼壓縮成一行,適用於網站上線版),相當地方便!

1.Compass簡介

官網:Compass

compass就如第一句所說,他是個能加速Sass的一個 Framework,而且還是一個開源的 Framework。雖然安裝好Sass就可以使用Sass,但在編譯部分仍是稍嫌麻煩,這時搭配上compass的自動化編譯,無論是開發速度還是Sass程式碼的精簡度都更上一層。

為何說「無論是開發速度還是Sass程式碼的精簡度都更上一層」呢?

這邊簡單舉列幾點,關於compass更詳細的介紹將會在Sass旅程後半段出現,還請拭目以待。

1.1.Css前綴詞

前端工程師們應該都遇過在Chrome上運行正常,但到了火狐或者是萬惡的IE上就樣式失蹤的事件吧。

有些時候並不是樣式失蹤,只是該瀏覽器不吃那一行程式碼(阿這樣好像也算失蹤了w),而是吃「專屬於該瀏覽器的程式碼」,也就是帶有所謂的「前綴詞」的CSS樣式。

舉例來說,圓邊就是一個例子。

在手刻CSS的時期,光一個圓邊就得打上五行的程式碼,每次更改就得改五行,無論是新增還是維護,都是一種對眼睛(還有對耐性)的挑戰。

有了Compass,一行就結束了。

1.2.合成Sprite

Sprite是一種將網站中小圖示集合成一張大圖,並根據坐標軸顯示不同小圖示的一種技術。實質好處就是網站載入時只要載入一張圖,而不是載入好幾張細碎的小圖示。對加速網站載入時間有一定的幫助。

過往這種Sprite圖都得拜託美術幫個忙把圖片和在一起,而且圖片間的間距還會特別要求調的一樣(座標計算比較方便XD)

有了compass,不用再拜託美術,compass就能合成了!

其他還有很多好處,拿前綴詞出來只是一個範例,compass有極為強大的function供工程師們使用,幫工程師們節省不少時間。

此外,Sass需要經過編譯才會變成CSS,在使用compass的前提下,「編譯」這一個動作基本上不需要工程師手動編譯,只要在專案開始製作時開啟「監看模式」,當被監看的Sass有更動時,compass便會自動將Sass編譯成CSS,也就是所謂的「自動化」。

總和以上幾點,建議要使用Sass的話一定要記得安裝compass!

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.