指南针：生成精灵，加上精灵中每个图像的宽度/高度答案

【问题标题】：Compass: generate Sprites, plus width / height on each images in the sprite指南针：生成精灵，加上精灵中每个图像的宽度/高度
【发布时间】：2012-11-23 23:27:53
【问题描述】：

我正在使用 Compass（一个 CSS 框架）来生成精灵图像。它可以工作，但罗盘只为每张图片生成一个背景位置。

是否可以同时获取精灵中每个图像的宽度和高度？

这是我的代码：

@import "ico/*.png";
@include all-ico-sprites;

生成的代码：

.ico-sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
}

.ico-bag-black {
  background-position: 0 -24px;
}

还有我想要的代码：

.ico-sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
  width:40px;
  height:24px;
}

.ico-bag-black {
  background-position: 0 -24px;
  width:44px;
  height:30px;
}

谁能向我解释我该怎么做？谢谢。

【问题讨论】：

标签： css css-sprites compass-sass sass

【解决方案1】：

这行得通：

@include all-<map>-sprites(true);

但您可能需要考虑使用配置变量的文档化方式：
http://compass-style.org/help/tutorials/spriting/

您只需在导入前指定配置变量。在你的情况下：

$ico-sprite-dimensions: true;
@import "ico/*png".
@include all-ico-sprites;

将true 发送到所有包含工作，但由于它没有记录，似乎配置变量是首选方法。

除了维度之外，还有其他可用的配置变量：

$<map>-spacing           // space in px around the sprites
$<map>-repeat            // whether to repeat the sprite bg
$<map>-position          // the x position of the sprite on the map
$<map>-sprite-base-class // the base class (default ".<map>-sprite")
$<map>-clean-up          // whether to delete old image maps
$<map>-<sprite>-spacing  // spacing, for individual sprites
$<map>-<sprite>-repeat   // repeat, for individual sprites
$<map>-<sprite>-position // position, for individual sprites

【讨论】：

无论我通过什么基类，它总是抛出一个错误。这些天这个配置选项似乎坏了。
现在还存在诸如“-layout”之类的其他东西——见the latest source
为了清楚起见，订单反映在结果中。 @import "ico/*png" 应该在 $-property 之后
什么真正的他妈的...拯救了我的一天。谢谢！
有没有办法为这些全局设置默认值？ $sprite-dimensions: true; 会非常有用。

【解决方案2】：

我找到了解决方案。只需将 true 作为第二个参数传递：

@include all-ico-sprites(true);

很简单。

【讨论】：