Compass - 获取生成的精灵图的宽度和高度答案

【问题标题】：Compass - Get width and height of generated sprite-mapCompass - 获取生成的精灵图的宽度和高度
【发布时间】：2012-10-21 00:50:02
【问题描述】：

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

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

【问题讨论】：

标签： sencha-touch extjs sencha-touch-2 sass compass-sass

【解决方案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);

【讨论】：

这在最新版本的 Sass (3.4) 中似乎不再起作用。 sprite-path 返回完整的文件系统路径，而 image-width 需要相对于图像目录的路径。不知道他们为什么改变它。

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}

查看official documentation了解更多详情。

【讨论】：

【解决方案4】：

Ext.getBody().getSize() 获取屏幕的高度和宽度，但我认为你不能在 SASS 中编写此代码

【讨论】：