Responsive sprites with SASS

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(


$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.


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.

Other Articles

The Power of Social Commerce: Real-Life Case Studies

As an ecommerce business owner, I've always been intrigued by the power of social media and its potential to boost sales. Social commerce, the integration of social media and ecommerce, has emerged as a game-changer in the industry. It allows businesses to reach and engage with their target audience on

Read more

2024 Sustainable eCommerce Growth: Key Trends Shaping Eco-Friendly Online Shopping

‍‍ In recent years, the concept of sustainability has become increasingly important in various industries, and e-commerce is no exception. Sustainable e-commerce refers to the practice of conducting online business operations in an environmentally friendly and socially responsible manner. This article will delve into the emerging trends in sustainable e-commerce, highlighting

Read more
Beyond Code – We Build Experiences: Dive Into a Realm Where Every Line of Code Crafts a Story

We don't just code; we breathe life into your digital aspirations. Our expertise in coding is complemented by our design approach and strategic marketing initiatives, ensuring your brand not only looks good but performs exceptionally.

Begin Your Story