twolfson / gulp.spritesmith

Convert a set of images into a spritesheet and CSS variables via gulp
The Unlicense
1.07k stars 81 forks source link

Change units from px to rem / em / ... #143

Closed Scorpovi4 closed 5 years ago

Scorpovi4 commented 5 years ago

How to change units if it possibles in gulp config?

Or I can make it manually with separating mixin out of general scss file and change units there, BUT mixiты operate with some kind array indexes and I need value by this indexes to recalculate....

The place where I want change units:

@mixin sprite-width($sprite) {
    width: nth($sprite, 5);
  }

  @mixin sprite-height($sprite) {
    height: nth($sprite, 6);
  }
twolfson commented 5 years ago

Unfortunately, we don't support changing units via configuration. Your intuition is right, overriding or defining custom mixins is the easiest option. There's also options like defining a custom template/extending an existing one

To expand on the overriding mixins point, this can be done by:

// Import our spritesmith variables and mixins
@import 'sprites.scss';

// Perform our overrides
@mixin sprite-width($sprite) {
  width: nth($sprite, 5)rem;
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6)rem;
}

If we need to utilize additional variables (I see something about array indexes in your initial description), then I'd recommend using the scss-maps format and defining our own mixins entirely:

// In `gulpfile.js`, set up custom format
// https://github.com/twolfson/spritesheet-templates#templates
gulpSpritesmith({
  cssFormat: 'scss_maps'
})
@mixin sprite($sprite, $data) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  if ($data == 1) {
    width: map-get($sprite, 'width')px;
    height: map-get($sprite, 'height')px;
  } else {
    width: map-get($sprite, 'width')rem;
    height: map-get($sprite, 'height')rem;
  }
}