Can spritesmith generate responsive sprites?

Responsive sprites means they scale with the browser, and also, that you can make an image fit its container, etc.

Does spritesmith already generate this sort of data? Has anyone done this, any tips?

The typical calculation is:

width:  @image-width;
height: @image-height;

background-size: ((@sprite-total-width  / @image-width)  * 100%)
                 ((@sprite-total-height / @image-height) * 100%);

// x or y may be 0% depending on stacking of the sprite (vertical vs horizontal)                   
background-position: ((@image-offset-x / (@sprite-total-width  - @image-width))  * 100%)
                     ((@image-offset-y / (@sprite-total-height - @image-height)) * 100%);

There is some background here and here.

It’s fiddly, and I need to do it all by hand. Has anyone managed to do something like this with less and spritesmith?

[jasonlav]

It is 2016, background-size CSS3 property is well supported and responsive websites are the norm. If you must support the 0.3% of users who are still using IE8, then don’t use this version.

Thanks to @stevenw00 and @denisz1 for leading the way on this.

https://gist.github.com/jasonlav/32e72a4afc348cd176dcd52cf9a45dbe

[kevinmpowell]

@stevenw00 thanks for that scss solution. I made a couple tweaks: https://gist.github.com/kevinmpowell/97357409b9af7625b257

I had an existing CSS role max-width: 100%; on all my images which was breaking this functionality so I explicitly set that to max-width: none;

The margin-bottom calculation was incorrect. I think it would work if your sprite was one horizontal strip, but mine wasn’t so I was seeing issues. My fork made the change.