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

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

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;
}

查看official documentation了解详情。

Answer 4

Ext.getBody（）。getSize（）获取屏幕的高度和宽度，但我不认为你可以在SASS中写这个

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

4 个答案: