使用 Spritesmith 时更改 sprite mixin 名称？

Question

我正在使用 Spritesmith 创建图像精灵并为我提供背景图像的混合：

https://github.com/twolfson/gulp.spritesmith

gulp.task('sprite-homepage', function () {
  var spriteData = gulp.src('images/homepage/*.png').pipe(spritesmith({
    imgName: 'homepage-sprite.png',
    cssName: '_homepage-sprite.scss'
  }));
  return spriteData.pipe(gulp.dest('build'));
});

.something {
  @include sprite($logo);
}

这工作正常，但我想更改混合名称。这可以做到吗？

.something {
  @include sprite-homepage($logo);
}

Answer 1

创建的 SASS 文件 _homepage-sprite.scss 包含不同 CSS 规则的变量。它还创建了一个可以与此一起使用的混合：

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

如果您将这个生成的 SASS 文件导入到您自己的 SASS 文件中，您可以像这样重写 mixin：

@mixin some-other-name($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

使用 Spritesmith 时更改 sprite mixin 名称？

Change sprite mixin name when using Spritesmith?

css-sprites

gulp