css-sprite使用詳解

 　　可能是最好用的雪碧圖工具了，好吧，至少是我用過最好用的。

　　首先安裝css-sprite，安裝這裡很坑，等我最後再說。

　　代碼如下:

　　npm install css-sprite

　　我是使用gulp來構建前端代碼，所以還需要安裝gulp和gulp-if,安裝好之後就可以開始配置啦。

　　新建一個task:

　　CSS Code復制內容到剪貼板

　　var gulp = require('gulp');

　　var gulpif = require('gulp-if');

　　gulp.task('sprites',function(){

　　gulp.src('img/icon/*.png') //這是要合並的圖片的路徑

　　.pipe(sprite({

　　name: 'icon', //定義一個名稱

　　style: '_icon.scss', //這是生成的樣式文件

　　format: 'png', //png格式的圖片

　　orientation: 'left-right', //雪碧圖合並的方向，也可以設置成垂直或水平

　　cssPath: '#{$icon-sprite-path}', //雪碧圖的路徑變量

　　template: './sprite-tpl.mustache', //scss生成的模板

　　processor: 'scss' //生成的樣式文件的格式

　　}))

　　.pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));

　　});

　　scss的模板使用mustache：

　　CSS Code復制內容到剪貼板

　　{{#items}}

　　${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};

　　{{/items}}

　　@mixin sprite-width($sprite) {

　　width: nth($sprite, 3);

　　}

　　@mixin sprite-height($sprite) {

　　height: nth($sprite, 4);

　　}

　　@mixin sprite-position($sprite) {

　　$sprite-offset-x: nth($sprite, 1);

　　$sprite-offset-y: nth($sprite, 2);

　　background-position: $sprite-offset-x $sprite-offset-y;

　　}

　　@mixin sprite($sprite) {

　　@include sprite-position($sprite);

　　@include sprite-width($sprite);

　　@include sprite-height($sprite);

　　}

　　{{#sprite}}

　　{{class}} {

　　background-repeat: no-repeat;

　　overflow: hidden;

　　border: none;

　　background: url('{{{escaped_image}}}?v=#{$version}');

　　@include inline-block();

　　vertical-align: middle;

　　font-style: normal;

　　color:$icon-font-color;

　　}

　　{{/sprite}}

　　{{#items}}

　　.{{name}}{

　　@include sprite(${{name}});

　　}

　　{{/items}}

　　搞定!就是那麼簡單。

　　現在只需要把圖片丟到icon文件夾裡面，運行下gulp sprites，就可以生成一張雪碧圖icon.png和相對應的scss樣式文件_icon.scss了，也可以再新建一個監聽的任務，監聽icon文件夾，這樣就可以實時生成了。

　　我把_icon.scss貼出來：

　　CSS Code復制內容到剪貼板

　　$icon-qq: -262px -161px 60px 60px;

　　$icon-email: -332px -161px 60px 60px;

　　$icon-skype: -5px -252px 60px 60px;

　　$icon-phone: -75px -252px 60px 60px;

　　@mixin sprite-width($sprite) {

　　width: nth($sprite, 3);

　　}

　　@mixin sprite-height($sprite) {

　　height: nth($sprite, 4);

　　}

　　@mixin sprite-position($sprite) {

　　$sprite-offset-x: nth($sprite, 1);

　　$sprite-offset-y: nth($sprite, 2);

　　background-position: $sprite-offset-x $sprite-offset-y;

　　}

　　@mixin sprite($sprite) {

　　@include sprite-position($sprite);

　　@include sprite-width($sprite);

　　@include sprite-height($sprite);

　　}

　　.icon {

　　background-repeat: no-repeat;

　　overflow: hidden;

　　border: none;

　　background: url('#{$icon-sprite-path}/icon.png?v=#{$version}');

　　@include inline-block();

　　vertical-align: middle;

　　font-style: normal;

　　color:$icon-font-color;

　　}

　　.icon-qq{

　　@include sprite($icon-qq);

　　}

　　.icon-email{

　　@include sprite($icon-email);

　　}

　　.icon-skype{

　　@include sprite($icon-skype);

　　}

　　.icon-phone{

　　@include sprite($icon-phone);

　　}

　　使用的時候只需要加上類似class="icon icon-qq"，就可以了。

　　css-sprite的地址

　　現在作者已經沒有更新css-sprite了，現在叫sprity，配置差不多，sprity多了一些功能，有時間再介紹。

　　現在說下開頭說的那個坑，就是安裝的問題，微軟的環境很難安裝成功，因為依賴lwip，需要node-gyp重新編譯，我自己的電腦安裝好了，但是有些同事的電腦怎麼配置都安裝不成功。mac下還沒有嘗試，估計應該沒什麼問題，windows的環境比較操蛋。

　　如果你們也遇到安裝的問題，能夠解決的話，麻煩告知下啦。：)