css sprite 按钮,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}');

@includeinline-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-161px60px60px;

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

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

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

@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}');

@includeinline-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的环境比较操蛋。

如果你们也遇到安装的问题，能够解决的话，麻烦告知下啦。：)