Compass - Get width and height of generated sprite-map - sencha-touch

Question

I'm building a Sencha Touch mobile application and are using the functionality to create image-sprite-maps with Compass.
Is there any way to calculate the size of the image-map (width and height) and put it as a variable in your SCSS file?

Answer 1

In Compass, image-height and image-width are the functions to get image dimensions. Using them with your sprite map would look something like this (warning, untested):
// Assuming $my-sprites is your sprite map variable
$map-path: sprite-path($my-sprites);
$map-height: image-height($map-path);
$map-width: image-width($map-path);

Answer 2

In the latest version of Sass (3.4) sprite-path() returns the full filesystem path while image-width() expects a path relative to the images directory. But there is a simple solution:
sprite-width($sprite-map);
sprite-height($sprite-map);

Answer 3

You can get a unit value by using the magical dimension functions <map>-sprite-height and <map>-sprite-width.
// Note: "my-icons" represents the folder name that contains your sprites.
#import "my-icons/*.png";
$box-padding: 5px;
$height: my-icons-sprite-height(some_icon);
$width: my-icons-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
width:$width + $box-padding;
}
Check the official documentation for more details.

Answer 4

Ext.getBody().getSize() gets you height and width of the screen but i dont think you can write this in SASS