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

发布于 2024-11-29 05:17:26 字数 770 浏览 2 评论 0原文

我正在使用 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;
}

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

原文

I'm using Compass (a CSS Framework) to generate sprite images.
It work, but compass generate only a background-position for each image.

Is it possible to get also the width and the height for each image in the sprite?

This is my code:

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

The generated code:

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

And the code i would like to have:

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

Can anyone explain to me how I can do that?
Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北方的韩爷 2024-12-06 05:17:26

这可行：

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

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

您只需在之前指定配置变量即可进口。在您的情况下：

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

将 true 发送到 all include 有效，但由于它没有记录，因此配置变量似乎是首选方法。

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

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

This works:

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

But you may want to consider the documented way of using configuration variables:
http://compass-style.org/help/tutorials/spriting/

You just specify the config variable before the import. In your case:

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

Sending true to the all include works, but as it's undocumented, it would seem that configuration variables are the preferred method.

Aside from dimensions these are the other configuration variables available:

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

回复收藏 0 原文