Responsive sprites with SASS

 It often happens that in the development process the front-end developer face the problem how to get the sprites to be responsive. For, on the one hand, sprites help in the optimization of the page, but on the other hand they are absolutely not adaptive, which in the current realities is a significant drawback.

 To make icons responsive we need to set sizes according to their relative size. But it does not work with sprites. By setting background-size and background-position as a percentage, the size of the entire table of sprites is taken as a basis. Such a result, of course, does not suit us in any way.

 Well, let’s try to solve this problem in two ways. Using SASS and using JS / jQuery.

 Let’s start with the first one.

 To begin with, we need input data, namely:

 Height and width of the sprites sheet:

width: 865px;

height: 694px;

 The sizes of the image we need in the sprite, for example:

width: 437px;

height: 56px;

 Position of the image in the sprite, in absolute value (it can be in the original form, the function SASS will transform the number to its absolute value):

background-position-x: -15px;

background-position-y: -365px;

Now let’s start implementing the markup and SASS mixin which, in fact, will count everything and transmit the values to the right place.

• Create a block for our icon:

<div class = “our-icon”></div>

• create a mixin:

 For starters, the name and variables that we pass on to it

@mixin spritesPercentage (

$spriteName,        // name of the sprite file (without extension)

$ totalSheetWidth: 0, // width of the sprites file

$ totalSheetHeight: 0, // height of the sprites file

$ spriteWidth: 0, // width of the image in the sprite

$ spriteHeight: 0, // the height of the image in the sprite

$ spritePositionX: 0, // the image coordinates in the sprite along the X axis

$ spritePositionY: 0) // image coordinates in the sprite along the Y axis

 Here’s the body mixin:

background: url(“../images/sprites/” + $spriteName + “.png”) no-repeat center;

• here we write the file path, the name is loaded from the variable $spriteName. background-position-x: percentage(abs($spritePositionX) / ($totalSheetWidth – $spriteWidth));
• here the value of the variable X $spritePositionX is reduced to the absolute and the relative value of the image coordinate along the X axis is calculated.

background-position-y: percentage(abs($spritePositionY) / ($totalSheetHeight – $spriteHeight));

• here the value of the variable Y $spritePositionX is reduced to the absolute and the relative value of the image coordinate along the Y axis is calculated.

background-size: percentage($totalSheetWidth / $spriteWidth), percentage($totalSheetHeight / $spriteHeight);

• Here, relative values of the width and height of the size of the background are calculated.

 Eventually, we have such a mixin:

@mixin spritesPercentage(

$spriteName,

$totalSheetWidth: 0,

$totalSheetHeight: 0,

$spriteWidth: 0,

$spriteHeight: 0,

$spritePositionX: 0,

$spritePositionY: 0){

background: url(“../images/sprites/” + $spriteName + “.png”) no-repeat center;

background-position-x: percentage(abs($spritePositionX) / ($totalSheetWidth – $spriteWidth));

background-position-y: percentage(abs($spritePositionY) / ($totalSheetHeight – $spriteHeight));

background-size: percentage($totalSheetWidth / $spriteWidth), percentage($totalSheetHeight / $spriteHeight);

}

• Once you have this in place,  call mixin in sass with the required values:

.our-icon {

@include spritesPercentage (spritesheet-buttons, 424, 854, 394, 59, -15, -691);

}

• At compilation we receive:

1. .our-icon {
2. background: url(“../images/sprites/spritesheet-grey-buttons.png”) no-repeat center;
3. background-position-x: 50%;
4. background-position-y: 86.91824%;
5. background-size: 107.61421%, 1447.45763%;
6. }

As we have seen, we get all the values of the properties in percent to within a hundred thousandths.

In calculations, we do not round off and leave accuracy as is, up to one hundred thousandth.

It’s done !

Now when you change the size of the parent block, the picture from the sprite will always resize with it.

Examples:

Original size:

The half as original size:

Or twice as much

As you can see, the image from the sprite retains its proportions and size relative to the parent block.