csssprite使用方法介紹

歡迎大家在這裡學習csssprite使用方法!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!首先安裝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);

}

好了，csssprite使用方法內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

使用icon fonts來輔助CSS處理圖片的方法