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(

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

Other Articles

7 Best Shopify ERPs for your stores

When it comes to running a successful online store, having an efficient and streamlined backend system is crucial. That's where Enterprise Resource Planning (ERP) systems come into play. In this article, we will explore the best Shopify ERPs available in the market to help you manage your online store effectively.

Read more

7 Magento CRM Tools and Their Best Integrations 2024

As a business owner, you know how crucial it is to have a robust CRM (Customer Relationship Management) system in place. It helps you streamline your customer interactions, improve sales, and provide better customer service. In this article, I will introduce you to Magento CRM and discuss its importance in

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