I spent a lot of time looking for an answer on this matter, I came out with this solution, it works for me at least for now, is based on fixed pixel box-sizing, and horizontal sprites, will be a mess with percentage anyway because you will have to do the math for the pixel values for that percentage, and for random located sprites because you will have to find the random location of the sprite inside the image, too much math for a simple task I believe.
You need:
- Know the image width (
compass image-width($image))
- The original pixel size and location of the sprite inside the image (Photoshop does the trick)
- The size of the containing box proportional to the corresponding sprite you are intended to show
- And of course the amount of stretch you want to apply to the specific sprite.
As a piece of advice, you will have to leave at least 1px of physical margin between each image because percentages produce not integer pixels, and you will end up with overlaping sprites!! ;)
Check it out and give me some feedback please:
//functions
//stretch by percentage
@function stretchImage($width, $height, $percentage) {
$s_width: round( ($width * $percentage) / 100 );
$s_height: round( ($height * $percentage) / 100 );
@return ($s_width, $s_height);
}
//strip units
//(Eric M Suzanne) http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
//replace in string
//(css tricks) http://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
//get unitless percentage
@function getPercentageFrom($valueA, $valueB) {
$percentage: percentage(strip-units($valueA)/strip-units($valueB));
@return ($percentage);
}
//now the magic
//we know the witdh of the image containing the sprites
$image: url(http://www.cssguy4hire.com/codePenAssets/sprite_test.png);
$image_width: 965px;
//the amount of strech we want to aply
$stretchTo: 175;
//we know the current sprite measures we going to set
$sprite_width: 150px;
$sprite_height: 150px;
//left is 0 cuz is first sprite
$sprite_left: 0%;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size and position
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
//default position 0
$bkg_left: $sprite_left;
//compose the css
#image {
margin: auto;
width: $width;
height: $height;
position: relative;
display: block;
background: #00f00f $image $bkg_left 0 no-repeat;
background-size: $bkg-size;
border: 5px solid #cccccc;
//we chage the sprite
&.sprite_1 {
//the amount of strech we want to aply
$stretchTo: 250;
//we know the current sprite measures we going to set
//0 is te first sprite starting left to right
$sprite_width: 250px;
$sprite_height: 75px;
$sprite_left: 150px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.sprite_2 {
//the amount of strech we want to aply
$stretchTo: 80;
//we know the current sprite measures we going to set
$sprite_width: 140px;
$sprite_height: 120px;
$sprite_left: 400px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.sprite_3 {
//the amount of strech we want to aply
$stretchTo: 125;
//we know the current sprite measures we going to set
$sprite_width: 290px;
$sprite_height: 134px;
$sprite_left: 540px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.sprite_4 {
//the amount of strech we want to aply
$stretchTo: 153;
//we know the current sprite measures we going to set
$sprite_width: 135px;
$sprite_height: 56px;
$sprite_left: 830px;
//stretch sprite
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
}
http://codepen.io/wolfitoXtreme/pen/BymKyP
