Skip to content

read dir images width and height and list them for css sprites!

License

Notifications You must be signed in to change notification settings

luozt/spritelist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

spritelist

read dir images width and height and list them for css sprites!

install

必须安装在全局:npm i -g spritelist

##usage

spritelist

直接扫描当前文件夹的图片文件,打开127.0.0.1:9090地址,生成sprites less样式;

spritelist <path>

扫描定义文件夹下的图片文件:

spritelist -p
  • 加上-n参数,生成的spriten的样式;
  • 加上-p参数,则不生成文件,直接打印在console中;
  • 加上-f参数,则不打印,而是生成sprites less样式的sprites.txt文件;
  • 加上-c--css参数,则生成的是css属性的样式表,需开发者自定义图片路径;

##应用于开发

默认生成的spritelist样式表样例为:

.sprite-1{.sprite-item("1",".jpg",454,810);}
.sprite-2{.sprite-item("2",".jpg",607,810);}
.sprite-3{.sprite-item("3",".jpg",640,854);}

上面的样式表需基于以下的样式:

/** 雪碧图配置 */
.sprite-item(@basename, @ext, @width, @height){
  background-image: url("../img/sprites/@{basename}@{ext}");
  width: @width*1px;
  height: @height*1px;
}

/** 前缀: sprite-。精灵图基本样式与各图层 */
.sprite-ico{display:block; border:none; background-color:transparent; background-repeat:no-repeat;}

开发时,在HTML则非常方便就写出UI级的图标了:

<i class="sprite-ico sprite-1"></i>
<i class="sprite-ico sprite-2"></i>

这样写的好处是:

  1. 把雪碧图抽象出来成为UI级的控件,使用起来极其方便
  2. 把定义雪碧图的样式表抽象出来,方便结合其他雪碧图工具来替换
  3. 保留了雪碧图的原图,添加、修改、删除都方便

About

read dir images width and height and list them for css sprites!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published