萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 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}');

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

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

copyright © 萬盛學電腦網 all rights reserved