2011/04/14

呆初心者的compass.app第一步

之前因為看到推薦用compass.app來以sass快速寫css(這樣看起來好迂迴XD),非常心動,
前幾天想說有時間,趕快買來用用看,
結果解開下載的壓縮檔後得到分別用來裝在windows、mac和linux上用的壓縮檔,
再解開windows用的壓縮檔,得到一個資料夾,
嗯...沒有readme,也沒有help @@
點擊compass-app.exe就可以開啟,也有小icon出現在右下系統列,
可是看來看去,都看不出來到底要怎麼開始才好,選watch a folder也沒有作用,
光是顯示Nothing to compile.的錯誤訊息,
用Create Compass Project也不知道要Create在哪裡好,囧..
網站上也沒什麼說明,
好吧那上它github的頁面看看...
可能我資質駑鈍,總之還是沒找到什麼說明!!囧!!!
好吧那來看compass的官網,還是一片霧煞煞...
自己亂裝還是很怕弄錯,畢竟這種參照來關聯去的東西,總覺得一個沒擺好就會做白工,
今天索性就不去練劍了,去了一趟RGBA問專家evenwu
很有效的馬上獲得解決!

原來已存在的資料夾無法直接watch,是因為裡面也都沒有設定檔的關係,
要開始用compass.app的話,
就是先點compass的icon,然後Create Compass Project > compass > project

找到想放整個專案的地方,鍵入要開啟的專案資料夾名稱:

接下來螢幕會顯示一個Compass Report顯示資料夾已經開好了!
打開剛剛建好的專案資料夾可以看到會長這個樣子:

其中.sass-cache的資料夾不用理它@@
sass資料夾裡面要放的是我們寫的scss檔案,
至於由這些scss的檔案生成的css檔則會自動出現在stylesheets資料夾中。
不過應該很少人會把放css的資料夾命名stylesheets,所以想更改就要編輯設定檔config.rb。
可以用文字編輯器開啟後把css_dir那一行改平常命名的樣子,像我平常都叫css就是改成css_dir=css

改完之後必須點conpass的icon,選watching XXXXX的項目,停止目前的watching,
然後點History:之下的路徑,重新watching目標資料夾,才能夠套用到新設定。
之後只要config.rb有任何修改,一定要記得進行這個步驟不然不會有作用!
重新整理專案的資料夾後,就可以看到剛剛設定的css資料夾自己跑出來囉!

至於用不到的stylesheets資料夾可以直接刪掉。
這個時候架構大概確定了,如果有本來做到一半的專案突然想使用compass的話,
就照著前面的步驟做,再把原有的檔案們搬進來專案資料夾中吧。

接著來試著編輯一下scss檔案,
在我粗淺的認知中,sass的眾多好處之一就是可以以巢狀的方式撰寫:

寫好存檔後再去css資料夾看,
只要在sass資料夾中編輯的scss檔,會以相應的檔名生成css於css資料夾,
打開會看到前面一大堆很長是因為在scss檔案中寫了@import "compass/reset";而自動生成了css中reset的部份,
我寫的部份其實只會生成這些:

另外專家說,在scss檔裡面可以寫兩種註解,
如果使用//blablabla來做單行註解的話,只會保留在scss檔裡面,不會出現在產生的css中,
若使用/*blablabla*/的話,就會一併在css檔案中出現。

我也問了若是當要把東西交接給不會寫sass的人怎麼辦?
解答是:反正生成的也就是css,把css給交接的人就好了...XD
只是生成的css有一大堆scss行數的註解,對不要用的人來說是種負擔,
這時就在config.rb中加上line_comments = false,就可以把多餘的註解消除得一乾二淨!


其他還有很多好用的設定值,可以讓產生的css自動minify等等,可以參見這裡

至於sass還有哪些超棒的功能,就看官網囉!

總而言之今天學到很多超開心!還好有來問不然自己摸一定摸不出來 >"<
之後要繼續努力 : D