athena-spritesmith

css spritesmith for athena

Showing:

Popularity

Downloads/wk

18

GitHub Stars

3

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

6

Size (min+gzip)

60.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

postcss-athena-spritesmith

针对Athena订制的CSS雪碧图工具,源码改自postcss-sprite

ChangeLog

请见ChangeLog

Install

npm install postcss-athena-spritesmith -D

How To Use

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sprites = require('postcss-sprites');
var opts = {
  stylesheetPath: modulePath + '/dist/_static/css/',
  spritePath: modulePath + '/dist/_static/images/sprite.png',
  retina: true,
  verbose: true
}
gulp.src( modulePath + '/dist/_static/css' )
    .pipe(postcss(sprites(opts)))
    .dest( modulePath + '/dist/_static/css' )

source.css

直接在需要合并雪碧图的CSS的url图片带?__sprite后缀即可

/* 请确保需要合并雪碧图的后缀带有`?__sprite` */
body {
  background: url('images/ball.png?__sprite'); 
}

h1 {
 background-image: url('images/help.png?__sprite');
}

功能更新目录

提供了自定义生成多张雪碧图的功能,例如引用图片A/B/C/D,想要让A/B生成雪碧图sprite_1,C/D生成雪碧图sprite_2,则可以通过分别携带后缀?sprite=sprite_1和?sprite=sprite_2来生成两张雪碧图。

source.css


.a {
  background-image: url('images/A.png?__sprite=sprite_1');
}

.b {
  background-image: url('images/B.png?__sprite=sprite_1');
}
.c {
  background-image: url('images/C.png?__sprite=sprite_2');
}

.d {
  background-image: url('images/D.png?__sprite=sprite_2');
}

output.css


.a {
  background-image: url('images/sprite_sprite_1.png');
}

.b {
  background-image: url('images/sprite_sprite_1.png');
}
.c {
  background-image: url('images/sprite_sprite_2.png');
}

.d {
  background-image: url('images/sprite_sprite_2.png');
}

配置中 rootValue 是控制当前模块全局的 rem 开关,如果想要指定某一处图片相关样式使用 pxrem 单位,可以在引用图片的地方通过参数指定,例如

// 指定使用 `px` 单位
.a {
  background-image: url('images/A.png?__sprite=sprite_1&__px');
}

// 指定使用 `rem` 单位
.a {
  background-image: url('images/A.png?__sprite=sprite_1&__rem');
}

// 使用 `rem` 单位时同时指定自己的 `rootValue`
.a {
  background-image: url('images/A.png?__sprite=sprite_1&__rem=20');
}

配置中 __widthHeight 是控制关闭强制替换背景图width和height,例如

// 强制使用 `__widthHeight` 来关闭widthheight替换
.a {
  background-image: url('images/A.png?__sprite=sprite_1&__widthHeight');
  width:10px;
  height:10px;
}

增加 __widthHeight__rem=20同时配置使用

.a {
  background-image: url('images/A.png?__sprite=sprite_1&__widthHeight&__rem=20');
  width: 22px;
  height: 30px;
}

output.css

.a {
    background-image: url('images/sprite_sprite_1.png');
    background-position: -81.6rem -24.05rem;
    background-repeat: no-repeat;
    width: 1.1rem;
    height: 1.5rem;
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100