指南针 - 获取生成的精灵地图的宽度和高度

Question

我正在构建Sencha Touch移动应用程序，并且正在使用该功能与Compass创建图像精灵地图。

有没有什么方法可以计算图像映射（宽度和高度）的大小并将其作为一个变量放入SCSS文件中？

Answer 1

写在罗盘，image-height和image-width是获得图像尺寸的功能。用你的精灵地图使用起来会是这个样子（警告，未经测试）：当图像宽度（）预计

// 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

Ext.getBody（）的getSize（）让你的屏幕的高度和宽度，但我不认为你可以在SASS

Answer 3

在萨斯的最新版本（3.4）精灵路径（）返回完整文件系统路径一个相对于images目录的路径。但有一个简单的解决方案：

sprite-width($sprite-map); 
sprite-height($sprite-map); 

Answer 4

可以使用神奇的尺寸功能<map>-sprite-height和<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; 
} 

查看official documentation了解更多详情。