先分享一下地址：http://alloyteam.github.io/gopng/
使用的方法也很簡單，將需要的小圖標拖進去，全部拖進去后再調位置（每拖一個進去都會幫你排列好，但是沒有間隔，所以全部拖進去后自己調）
然后點擊右邊
綠色的make按鈕即可
點擊后，上面的選項會高亮，提示你制作好了，
點擊PNG選項即可下載制作好的雪碧圖， 點擊css選項即可查看每個小圖標在雪碧圖中對應的x和Y位置
對於PC端來說，基本就完成了。
對於移動端采用rem布局的，則需要多一些步驟：
首先將對應的x和y位置轉化為rem:以640設計稿為例，html的fontsize為64px（本例假設采用了淘寶的flex.js）
假設某個小圖標對應雪碧圖的x y位置為-200px , -100px
則對應的x位置為-200/64(rem) Y坐標為-100/64(rem);
此外，還需要background-size配合，假設制作好的雪碧圖為400*300，
則設置:background-size: 400/64(rem) 300/64(rem) 或者:background-size: 400/64(rem) auto 或者直接 background-size: 400/64(rem)；
如此一來，即使使用了rem布局在移動端也可以大膽的使用雪碧圖了，但是在rem轉化的時候計算非常麻煩，因此可以再sass文件里添加2個方法：
//將px轉化為rem（根據html的fz進行轉化）
@function torem($px) {
@return $px / 64px * 1rem;
}
//定制mixin代碼塊：需要4個參數：圖片地址，x軸位置，Y軸位置，雪碧圖寬度
@mixin spImg($url, $left, $top, $imgWidth ) {
background: url($url) no-repeat $left $top;
background-size:$imgWidth;
}
使用的時候如下：