sencha-touch - Compass - 获取生成的精灵图的宽度和高度

Question

我正在构建一个 Sencha Touch 移动应用程序，并使用该功能通过 Compass 创建图像精灵图。

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

Answer 1

在 Compass 中，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

在最新版本的 Sass (3.4) 中， sprite-path() 返回完整的文件系统路径，而 image-width() 需要相对于图像目录的路径。但是有一个简单的解决方案：

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

Answer 3

您可以使用神奇的维度函数<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;
}

查看官方文档以获取更多详细信息。

Answer 4

Ext.getBody().getSize() 让你得到屏幕的高度和宽度，但我认为你不能在 SASS 中写这个