32

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.

2 Answers 2

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
6
  • No matter what I pass base-class, it always throws an error. This config option seems broken these days.
    – Drew
    Oct 12, 2012 at 1:33
  • Others such as '-layout' also exist now -- see the latest source
    – DrMeers
    Jun 11, 2013 at 11:04
  • Just to make it clear, the order reflects in the result. @import "ico/*png" should come after the $<map>-property Feb 27, 2014 at 18:21
  • Is there any way to set the defaults for these globally? A $sprite-dimensions: true; would be very useful. Jun 13, 2014 at 13:34
  • @PhpMyCoder looking at the source it does not appear so. Jun 13, 2014 at 18:01
7

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

@include all-ico-sprites(true);

Quite simply.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.