Boussole: générer des sprites, plus largeur / hauteur sur chaque image du sprite

Question

J'utilise Compass (un framework CSS) pour générer des images de sprite. Cela fonctionne, mais le compas ne génère qu'une position d'arrière-plan pour chaque image.

Est-il possible d'obtenir également la largeur et la hauteur de chaque image dans le sprite?

Voici mon code:

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

Le code généré:

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

Et le code que j'aimerais avoir:

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

Quelqu'un peut-il m'expliquer comment je peux faire ça? Merci.

Answer 1

Ceci fonctionne:

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

Mais vous voudrez peut-être envisager documentés de l'utilisation des variables de configuration:
http://compass-style.org/help/tutorials/spriting/

Vous venez de spécifier la variable de config avant de l'importer. Dans votre cas:

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

L'envoi d' true le comprennent toutes les œuvres, mais comme il est sans-papiers, il semblerait que les variables de configuration sont la méthode préférée.

Outre ces dimensions sont les autres variables de configuration 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

Answer 2

J'ai trouvé la solution. Passez juste vrai comme deuxième argument:

 @include all-ico-sprites(true);
 

Tout simplement.

Answer 3

Cela sonne un peu comme ce que jQueryUI est en train de faire dans leur CSS (pour ne pas mentionner une tonne d'autres endroits... mais je m'égare).

http://jqueryui.com/themeroller/css/parseTheme.css.php?ctl=themeroller

Si vous regardez ce qu'ils font sous les icônes qu'ils ont eu la "mère" de la classe attribuée à la hauteur et la largeur

 .ui-icon { width: 16px; 
            height: 16px; 
            background-image: url(../images/?new=222222&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png); }

ensuite, chaque sprite a la BG position.

.ui-icon-carat-1-n { background-position: 0 0; }

Dans la création d'un élément qu'ils s'appliquent à la fois les classes ui-icon et ui-icon-foo

Honnêtement, je ne vois rien de mal à ce que vous faites. Parlez-vous des paramètres du script?