[email protected] 這個真的很好用，特別是那些需要些瀏覽器前綴去hack的樣式，真的是大大節約了不少時間呢！！！！

//[email protected] 是我項目中經常用到的，下面有對應編譯生成的css

@include transition(color,0.3s,ease-in);
 -moz-transition: color, 0.3s, ease-in; -o-transition: color, 0.3s, ease-in; -webkit-transition: color, 0.3s, ease-in; transition: color, 0.3s, ease-in;

@include translateY(-5px);
 -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); 

@include opacity(0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;  //兼容了IE

四、 compass 的圖片精靈

　　這個真的很好用，很好用，很好用，很好用！！！！！

1. 在沒有compass之前，做圖片精靈的三步驟：

1. 將小icon用ps等相關工具合成一張圖片
2. 在瀏覽器慢慢調試background-position
3. 在瀏覽器慢慢調試width、height

不要看只有三步，這裏面的每一步都是相當耗時間的吶！！！

2. 使用compass的圖片精靈功能sprites

使用圖片精靈有下面多種方法，下面以icons這個圖片精靈文件夾為例，下面示例代碼中使用到的icons 均是指圖片精靈文件夾名字

1. 使用all-$dir-sprites , 這種方法最簡單，不管你用沒用到精靈的樣式，反正一次性生成所有圖片精靈，所以生成的代碼相對也最冗余

   @import "icons/*.png";
   @include all-icons-sprites;
   //生成 
   //生成的圖片精靈的class name 都是以“圖片文件夾-圖片名”的方式命名，並且有一個主要的class name "圖片文件夾-sprite"
   .icons-sprite, .icons-msg, .icons-qq, .icons-qq2, .icons-tell, .icons-weibo, .icons-weibo2, .icons-weixin, .icons-weixin2 { background-image: url(‘img/icons-s980cae6d97.png‘); background-repeat: no-repeat; }
   
   .icons-msg { background-position: 0 0; }
   
   .icons-qq { background-position: 0 -21px; }
   
   .icons-qq2 { background-position: 0 -68px; }
   
   .icons-tell { background-position: 0 -115px; }
   
   .icons-weibo { background-position: 0 -138px; }
   
   .icons-weibo2 { background-position: 0 -185px; }
   
   .icons-weixin { background-position: 0 -232px; }
   
   .icons-weixin2 { background-position: 0 -279px; }

2. [email protected] "icons/*.png";與 icons-sprite 配合使用 按需生成樣式

   $icons-sprite-dimensions:true;
   @import "icons/*.png";
   
   .img {
     .[email protected] icons-sprite(qq);}
     .[email protected] icons-sprite(weibo);}
   }
   //生成 
   [email protected] "icons/*.png" ，是不會生成任何代碼的，調用了icons-sprite 才會生成代碼，相對第一種方法，比較簡潔
   
   .icons-sprite, .img .qq, .img .weibo { background-image: url(‘img/icons-s980cae6d97.png‘); background-repeat: no-repeat; }
   
   .img .qq { background-position: 0 -21px; height: 47px; width: 47px; }
   .img .weibo { background-position: 0 -138px; height: 47px; width: 47px; }

3. 使用sprite-map ，這種方法最智能最靈活，可以生成二倍圖
   

   $sprite-icon: sprite-map("icons/*.png", $spacing: 5px, $layout: smart,$sort-by: ‘!width‘,$position:10px,$repeat:no-repeat);
   
   @mixin radio2-sprite($sprite-btn,$name) {
     //獲取當前圖標的圖片名字
     $imgurl: sprite-file($sprite-btn, $name);
     //獲取當前圖標的位置
     $pos: sprite-position($sprite-btn, $name);
   
     //根據名字獲取獲取長度和寬度，並設置
     width: image-width($imgurl) / 2;
     height: image-height($imgurl) / 2;
   
   
   
     //設置圖標的位置
     background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
     //使用compass的Css3模塊 兼容處理背景圖片大小
     @include background-size(ceil(image-width(sprite-path($sprite-btn)) / 2) auto);
   }
   //引用
   .icon {background-image: sprite-url($sprite-icon);}
   .qq [email protected] radio2-sprite($sprite-icon,qq)}
   
   //生成
   // 可以與上面生成的css對比，尺寸的確是縮小了一般，哈哈^^
   .icon { background-image: url(‘img/icons-s13e30d3d8d.png‘); }
   .qq { width: 23.5px; height: 23.5px; background-position: 0 -69px; -moz-background-size: 24px auto; -o-background-size: 24px auto; -webkit-background-size: 24px auto; background-size: 24px auto; }
   
   

4. 配置圖片精靈選項，配置選項是一個變量，[email protected] 之前使用，參考第二點使用
   

   //配置間距
   $icons-spacing: 5px;
   
   //配置重復性
   $icons-repeat: no-repeat;
   //配置尺寸
   $icons-sprite-dimensions:true;

結語： 好啦以上總結是我使用compass的一點小小經驗，歡迎溝通交流

sass & compass 實戰錄