Compás: genera Sprites, más ancho / alto en cada imagen del sprite


Estoy usando Compass (un framework CSS) para generar imágenes de sprites. Funciona, pero compass 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;
}

¿Puede alguien explicarme cómo puedo hacer eso? Gracias.

Author: Etienne, 2011-08-14

2 answers

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 /

Basta con especificar la variable de configuración antes de la importación. En su caso:

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

Enviar true al all include funciona, 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 disponible:

$<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
 74
Author: numbers1311407,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-23 15:27:53

Encontré la solución. Simplemente pasa true como segundo argumento:

@include all-ico-sprites(true);

Simplemente.

 7
Author: Etienne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-21 14:42:39