demoshop

官方網站

http://compass.handlino.com/

前面兩篇文章已經講完怎麼安裝compass.app，也針對Scss一些基本了用法列出了範例。
接下來要說的是比Scss還更加強大的compass，因為太龐大了所以也只列出部分用法，其他請見compass官網。 簡而言之compass是一個強大的framework，可以讓寫css變得更便利，藉由提供許多好用的mixin和helper來省去很多本來必須重複撰寫的部份，以下還是先從如何使用開始說明。

每次要使用compass之前，我們都要在檔案中把想用的部分 @import 進去，譬如想使用compass和css3相關的部份就用「@import "compass/css3";」，想使用reset的部份就寫「@import "compass/reset";」，甚至如果只有想用到css3的Text-shadow部分，也可以更詳細的寫「@import "compass/css3/text-shadow";」就好，需要import什麼部分可以參考compass官網的reference。如果覺得每次都要查實在很麻煩的話也可以直接寫「@import "compass";」，它會載入除了Layout和Reset的部分，平常我也是只寫這一行再加上「@import "compass/reset";」而已，簡單好記，對我來說也夠用。

大家都知道寫css的時候為了要讓各個瀏覽器的預設樣式全數歸零以避免版面很難一致的狀況，所以要使用css reset。當然也是已經有人寫好了，最受歡迎的大概就是Eric Meyer's reset 2.0和Yahoo的YUI css reset。如果習慣使用Eric Meyer版本的話在使用compass時只要寫這一行：「@import "compass/reset";」，compass就會直接把css reset的部份塞進產生出來的css裡，完全不用自己再貼一次，非常方便。

接下來是已經在用css3的人不能錯過的css3系列，針對很多需要寫一堆vendor prefix的屬性，compass都提供了相關的mixin可以利用。以box-shadow為例，目前因為css3還沒正式定案，要老老實實的寫一個box-shadow就要寫一遍這麼多東西：

  -moz-box-shadow: #cc0000 2px 2px 10px;
  -webkit-box-shadow: #cc0000 2px 2px 10px;
  -o-box-shadow: #cc0000 2px 2px 10px;
  box-shadow: #cc0000 2px 2px 10px;

說真的每用一次就要寫這麼多東西誰受得了啊！！勤奮如我都懶得這樣搞啊！！！
幸好有compass幫我們搞定這些事情，只要寫這麼一行：

  @include box-shadow(#cc0000 2px 2px 10px);

這樣就解決了，在這個兵荒馬亂的年代真是省時省事的利器。其他還有很多很棒的東西都可以在官網找到。

 

針對做網頁設計時常用到的Sprites(就是把很多小圖示集中在一張的做法)，compass也提供了很多東西可以幫你簡化這件事，但太複雜的應用其實我也沒在用。這裡只介紹基本的用法：
要使用此功能時請確定圖片資料夾的路徑有設定好，請見config.rb的images_dir部分，預設為images資料夾，若使用其他資料夾請參考「入門篇」的說明自行更改。compass許多與圖片相關的功能都會受到此設定的影響，使用前應確認清楚。

注意！請使用png檔案，如果用jpg或gif的話會因為類似預設沒有載入處理這種圖片格式的函式庫之類的問題而失敗。

1. 先把要集合起來的圖片們都丟到圖片資料夾中的一個資料夾裡面，我放了三張圖片在「menu」這個資料夾裡，分別是「about.png」、「history.png」和「contact.png」。
2. 在.scss檔案上方加入這兩行，注意第一行跟第二行的「menu」都是表示我放圖的資料夾名稱，記得改成你自己的：

           @import "menu/*.png";
           @include all-menu-sprites;      

   僅僅寫這兩行，compass就會幫我們根據圖檔的檔名產生出這樣的css，並建立相應的組合圖片：

   .menu-sprite, .menu-about, .menu-contact, .menu-history {
     background: url('/images/menu-se1c234f71b.png') no-repeat;
   }
   
   .menu-about {
     background-position: 0 0;
   }
   
   .menu-contact {
     background-position: 0 -16px;
   }
   
   .menu-history {
     background-position: 0 -32px;
   }
         

   這樣就寫完啦！連算位置都不用自己算！超方便！
   當然也可能有其他的需求，或是不想用圖片檔名來做為css名稱，都可以進行調整。請參考compass官網的Spriting with Compass教學。

 

除了滿坑滿谷的mixin可以用，compass還提供很多好用的Helper，不過實際上我並沒有很常用..畢竟效益跟拿來記的力氣相較之下可能不成比例。但是「image-width()」和「image-height()」這兩個helper倒是真的很值得用的！使用時只要像這樣：

  width: image-width('../images/logo.png');
  height: image-height('../images/logo.png');

compass便會自動取得該圖檔的寬高並帶入數值，不只不用自己去查到底有多寬/高，當圖檔尺寸變更時也不需要再修改一次(當然這可能也是缺點就是了，應該依照需求決定是否使用)。
有興趣的人也可以參考Compass Helper Functions，可以看到helper的列表及用法。

針對compass的部份大概就說到這裡，特別想提的是雖然它的強大用法非常多，但最後產出的仍然是css語法，如果你和我一樣很在意自己做出來的css最後長什麼樣子，建議不要盲目的使用，而應該多加了解mixin的內容再去決定要不要用。例如是它對於ie hack也提供許多好用的功能，雖然能夠很簡單的把需要hack的部分寫完，但是產出來的會是在屬性前面帶有*、_的css檔案，個人不是很喜歡...所以還是寧願自己慢慢寫。當然如果確定之後不會需要其他人接手css的維護，那想用什麼就快樂的用下去吧！

三篇compass.app相關文章就到此結束，雖然並不是講得很詳細但我想應該已經足夠讓有興趣的人找到繼續探索的門路了。如果覺得心動的話就買來玩玩看吧！不會後悔的喔！