CODEWITHSUNDEEP
gulpcss-sprites
Evanss
Evanss

Reputation: 23613

Change sprite mixin name when using Spritesmith?

Im using Spritesmith to create an image sprite and provide me with mixins for the background images:

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);
}

This is working fine however I would like to change the mixin name. Can this be done? 

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

Upvotes: 0

Views: 395

Answers (1)

Evanss
Evanss

Reputation: 23613

The created SASS file _homepage-sprite.scss contains variables for the different CSS rules. It also creates a mixin you can use with this: 

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

If you imported this generated SASS file into your own SASS file you could rewrite the mixin like so:

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

Upvotes: 1

Related Questions