css - online - sprite sheet generator

Brújula: genere Sprites, más ancho/alto en cada imagen del sprite

Question

Estoy usando Compass (un Marco CSS) para generar imágenes de sprites. Funciona, pero la brújula genera solo una posición de fondo para cada imagen.

¿Es posible obtener también el ancho y la altura de cada imagen en el sprite?

Este es mi código:

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

El código generado:

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

Y el código que me gustaría tener:

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

¿Alguien puede explicarme cómo puedo hacer eso? Gracias.

Answer 1

Encontré la solución. Solo pasa la verdad como el segundo argumento:

@include all-ico-sprites(true);

Muy simple.

Answer 2

Esto funciona:

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

Pero es posible que desee considerar la forma documentada de usar las variables de configuración:
http://compass-style.org/help/tutorials/spriting/

Usted solo especifica la variable de configuración antes de la importación. En tu caso:

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

El envío true al todo incluye trabajos, pero como no está documentado, parecería que las variables de configuración son el método preferido.

Aparte de las dimensiones, estas son las otras variables de configuración disponibles:

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