Tweaker les sprites de Sass

Hello,

j'ai besoin d'un coup de main pour générer des sprites avec Sass, j'aimerais arriver à tweaker un peu la fonction qui me sort les classes.

Imaginons que dans le répertoire icons16 j'ai 80 icônes que je veux "spriter".

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

Il me sort ça

.icons16-delete,
.icons16-edit,
etc.
 { background: url('/images/icons16-s34fe0604ab.png') no-repeat; }

.icons16-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
etc.

J'aimerais arriver à lui faire sortir ça :

.icons16-delete,
.icons16-edit,
etc.
 { background: url('/images/icons16-s34fe0604ab.png') no-repeat; 
   display: inline-block;
   padding-left: 1em;
 }

.icons16-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
etc.

.icons16-delete:hover,
.icons16-delete:active,
.icons16-delete:focus { background-position: 0 -16px; }


.icons16-edit:hover,
.icons16-edit:active,
.icons16-edit:focus { background-position: 0 -48px; }

etc.

Autrement dit, à partir du sprite, pouvoir faire une boucle qui génère ce que je veux.

Est-ce que ce genre de truc est possible facilement avec Sass ?

Merci d'avance !

.icons16-delete,
.icons16-edit,
etc.
 { background: url('/images/icons16-s34fe0604ab.png') no-repeat; 
   display: inline-block;
   padding-left: 1em;
 }

Tu veux cibler l'ensemble des icons du sprite? Si c'est le cas j'utilise cette méthode

[class%="icons16-"]{
display:inline-block;
etc..;
}

Ou tu peux utiliser la méthode qui consiste à utiliser la classe principale du sprite

.icons16-sprite {
display:inline-block;
etc..;
}

Je préfère la première méthode, elle allège le CSS.

Après pour tout ce qui est pseudo-sélecteurs d’état :focus, :active, c'est automatique dans Compass. En ajoutant le suffixe _hover, _active il va créer les bons sélecteur. Par contre pour lier ensemble une icon vers trois états pseudo-sélecteurs, à part le faire à la main, de cette manière. Je vois pas d'autre façon.

.icons16-delete:hover,
.icons16-delete:active,
.icons16-delete:focus { 
@include icons16-sprite(icons16-delete-ps); 
}

J'ai regardé la doc http://compass-style.org/help/tutorials/spriting/customization-options/ J'ai rien trouvé de plus.

D'autres options:

//Variable qui permet d'ajouter la dimension de tes icons dans le sélecteur généré
$icons16-sprite-dimensions: true; 
//Positionnement des images
$icons16-layout: vertical (par défaut), horizontal, diagonal et smart    

J’espère que ces quelques infos t'aideront
Modifié par magsout (03 Oct 2013 - 09:15)

Merci pour ton aide, j'avais trouvé le truc pour les dimensions mais c'est pas génialement paramétrable comme système (ça colle pas avec mon cas).
Du coup, Compass va juste me servir à générer l'image et à faire une partie du boulot, c'est impossible d'automatiser tout dans mon cas.

Bien vu pour

[class%="icons16-"]{

je n'y avais pas pensé. C'est supporté à partir de quel IE ce beau sélecteur ? (je dirais le 7, mais je ne suis pas sûr)

Salut,

Tu as quand même une fonctionnalité magic selectors qui est dispo pour cela en ajoutant simplement un suffixe...
Mais si il s'agit d'images aux tailles identiques et connues, la gestion via sélecteur d'attribut est une alternative légère.

tm