$scales:      (1, 2);
$particles:   8;
$padding:     10px;
$size:        42px;
$width:       336px;

@each $scale in $scales {
  @mixin sprite-x#{$scale}
  {
    background: url(/img/sprite-x#{$scale}.png) -#{$size/$scale} -#{$size/$scale} no-repeat;
    background-size: #{$width/$scale} auto;
    width: #{$size/$scale};
    height: #{$size/$scale};
  }

  .sprite-x#{$scale} {
    @include sprite-x#{$scale};

    @for $i from 0 through $particles {
      @for $j from 0 through $particles {
        &.sprite-#{$i+1}-#{$j+1} {
          left: #{-$i*($size/$scale)-$padding};
          top: #{-$j*($size/$scale)-$padding};
        }
      }
    }
  }
}