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

Question

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.

numbers1311407 · Accepted Answer · 2012-11-23T15:27:53.627

74

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

edited Nov 23 '12 at 15:27

answered Aug 21 '11 at 15:15

numbers1311407

33,686
9
90
92

No matter what I pass base-class, it always throws an error. This config option seems broken these days. – Drew Oct 12 '12 at 01:33
Others such as '-layout' also exist now -- see [the latest source](https://github.com/chriseppstein/compass/blob/stable/lib/compass/sprite_importer/content.erb) – DrMeers Jun 11 '13 at 11:04
Just to make it clear, the order reflects in the result. @import "ico/*png" should come after the $-property – Cassio Cabral Feb 27 '14 at 18:21
Is there any way to set the defaults for these globally? A `$sprite-dimensions: true;` would be very useful. – Bailey Parker Jun 13 '14 at 13:34
@PhpMyCoder looking at [the source](https://github.com/chriseppstein/compass/blob/stable/lib/compass/sprite_importer/content.erb) it does not appear so. – numbers1311407 Jun 13 '14 at 18:01
@numbers1311407 That was my assumption, but glad to have a Ruby person confirm. I submitted an [issue on Github](https://github.com/chriseppstein/compass/issues/1702) to request this. – Bailey Parker Jun 14 '14 at 16:37

score 7 · Answer 2 · answered Aug 21 '11 at 14:42

7

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

@include all-ico-sprites(true);

Quite simply.

answered Aug 21 '11 at 14:42

Etienne

2,257
3
27
41

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

2 Answers2

Linked

Related