Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@mixin responsivesprite($width, $height, $spritesize) {
    /* spritesheet should be #{$width * $spritesize} x #{$height} */
    background-size: 0 0;
    background-repeat: no-repeat;
 
    &:before {
       content: "";
       display: block;
       width: 100%;
       height: 0;

       /* single image is #{$width} x #{$height}. Aspect ratio 
        * is ~#{($height / $width) * 100%} 
        */
       padding-top: ($height / $width) * 100%;
       background-image: inherit;
       background-repeat: inherit;
       background-size: cover;
    }
    
    @for $i from 1 through $spritesize - 1 {
        $p : 100% / ($spritesize - 1) * $i;
        &:nth-child(#{$i + 1}):before { background-position: $p 0; }
    }
}


div {
  @include responsivesprite(310, 240, 5);
  background-image: url(//copy.com/CsYuIxVaYQKtUqe1/spritetest.jpg);
  width: 15%;
  float: left;
  margin: 10px;
}

SassMeister-output.css

div { /* spritesheet should be 1550 x 240 */ background-size: 0 0; background-repeat: no-repeat; background-image: url(//copy.com/CsYuIxVaYQKtUqe1/spritetest.jpg); width: 15%; float: left; margin: 10px; }
div:before { content: ""; display: block; width: 100%; height: 0; /* single image is 310 x 240. Aspect ratio  is ~77.41935%  */ padding-top: 77.41935%; background-image: inherit; background-repeat: inherit; background-size: cover; }
div:nth-child(2):before { background-position: 25% 0; }
div:nth-child(3):before { background-position: 50% 0; }
div:nth-child(4):before { background-position: 75% 0; }
div:nth-child(5):before { background-position: 100% 0; }

SassMeister-rendered.html

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>