mixtur / webpack-spritesmith

Webpack plugin that converts set of images into a spritesheet and SASS/LESS/Stylus mixins
499 stars 56 forks source link

What is $sprite variable in your plugin? #58

Closed wzup closed 6 years ago

wzup commented 6 years ago

So your plugin generates the following mixin. But your docs says nothing about $sprite variable. What is $sprite variable?

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

I'm generating sprite for .png flags. Your plugin generates the following. So, what is $sprite variable then?

$-united-states-name: 'United-States';
$-united-states-x: 240px;
$-united-states-y: 720px;
$-united-states-offset-x: -240px;
$-united-states-offset-y: -720px;
$-united-states-width: 48px;
$-united-states-height: 48px;
$-united-states-total-width: 816px;
$-united-states-total-height: 768px;
$-united-states-image: '~sprite.png';
$-united-states: (240px, 720px, -240px, -720px, 48px, 48px, 816px, 768px, '~sprite.png', 'United-States', );

How do I call an image? This throws:

.us {
    @include sprite('United-States');
}

// Throws
Module build failed: 
  $sprite-image: nth($sprite, 9);
                ^
      Index out of bounds for `nth($list, $n)

BTW: The error still remains. I expanded it https://github.com/mixtur/webpack-spritesmith/issues/53#issuecomment-372675263

mixtur commented 6 years ago

@include sprite($-united-states); should work.

I am not generating this code myself. I am using spritesheet-templates to do that.

Looks like it is a tuple with all parameters of sprite. Code seems to be generated the way that you can use $iconName in @include sprite($iconName).

wzup commented 6 years ago

Yes, that's correct, @include sprite($-united-states);. I managed to configure it.