插件地址:sprites
gulp.task('sprites', function() { return sprity.src({ src: './src/images/icon/**/*.{png,jpg}', style: './_icon.scss', margin: 20, orientation: 'left-right', processor: 'css', }) .pipe(gulpif('*.png', gulp.dest('./src/images/'), gulp.dest('./src/sass/'))) });
配置了margin:20 生成的background-position位置会不准,设置成margin:0能正常。
{{#each layouts}} {{#each sprites}} {{#if dpi}} @media (-webkit-min-device-pixel-ratio: {{ratio}}), (min-resolution: {{dpi}}dpi) { {{/if}} .icon { background-image: url('{{escimage url}}'); {{#if dpi}} background-size: {{width}} {{height}}; {{/if}} } {{#if dpi}} } {{/if}} {{/each}} {{#each layout.items}} .{{../classname}}-{{meta.name}} { background-position: (-{{x}}px - 20) (-{{y}}px - 20); width: ({{width}}px - 40); height: ({{height}}px - 40); } {{/each}} {{/each}}
加了个这个正常了,好像需要配置.hbs模板