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

A Guide to Optimizing Your Magento Store for Peak Performance

Why Does Magento Speed Matter? As an online retailer, the speed of your Magento store is crucial to your success. In today's fast-paced digital world, users have high expectations when it comes to website performance. If your Magento store is slow, it can have a significant impact on user experience

Read more

BigCommerce B2B Edition: A Guide to Scaling Your Online Presence

In today's digital age, moving your business online is no longer an option, but a necessity. However, making that transition can be challenging, especially for B2B businesses. Fortunately, there are platforms like BigCommerce B2B Edition that can help you overcome these challenges and unlock the true potential of your online

Read more

7 Top Magento Payment Gateways in 2024

What is a payment gateway? A payment gateway is an essential component of any e-commerce platform, including Magento. It acts as an intermediary between the customer and the merchant, securely transmitting payment data during online transactions. When a customer makes a purchase on a Magento website, the payment gateway encrypts

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