css-sprite，多是最好用的雪碧圖工具了

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

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

npm install css-sprite

我是使用gulp來構建前端代碼，因此還須要安裝gulp和gulp-if,安裝好以後就能夠開始配置啦。
新建一個task:

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：

{{#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貼出來：

$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的環境比較操蛋。

若是大家也遇到安裝的問題，可以解決的話，麻煩告知下啦。：）