开发者

Compass: generate Sprites, plus width / height on each images in the sprite

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;
  w开发者_JS百科idth:44px;
  height:30px;
}

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


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:

$<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


I found the solution. Just pass true as the second argument :

@include all-ico-sprites(true);

Quite simply.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜