Way de référence icône dans Compass Sprite sans inclure les sélecteurs magiques

Question

Ceci est en particulier le cadre de spriting Compass

Après la documentation ici http://compass-style.org/help/tutorials/spriting/#magic-selectors

Je l'ai utilisé cette méthode pour que ceci:

• sélecteurs/dix-by-ten.png
• sélecteurs/dix-b y ten_hover.png

.edit { 
    @include selectors-sprite(ten-by-ten); 
} 

génère:

.selectors-sprite, .edit { 
    background: url('/selectors-sedfef809e2.png') no-repeat; 
} 
.edit { 
    background-position: 0 0; 
} 
.edit:hover, .edit.ten-by-ten_hover, .edit.ten-by-ten-hover { 
    background-position: 0 -20px; 
} 

qui est vraiment super. Cependant, je me demandais Si/Comment dans une autre instance, je pourrais inclure l'image "ten-by-ten.png" de l'image-objet sans inclure l'état hover attaché par magie?

dire

Je veux ceci:

.view { 
    background: url('selectors/ten-by-ten.png') no-repeat; 
} 

Où planant sur cette icône ne déclenche pas l'état: vol stationnaire (dix par ten_hover.png).

Mais je me demandais s'il y avait un moyen d'y parvenir en faisant toujours référence à l'image sprited?

Merci pour toute aide/conseil.

Answer 1

Vous pouvez ajouter des sprites directement à un élément à l'aide de la directive @extend. La syntaxe est @extend .folder préfixe - nom sprite - état (c.-à-.selectors sprite-name_hover):

.view { 
    @extend .selectors-ten-by-ten 
} 

    &:hover { 
    @extend .selectors-ten-by-ten_hover 
    } 

    &:active { 
    @extend .selectors-ten-by-ten_active 
    } 

Answer 2

.selectors-dix par ten_hover, .selectors-dix par-ten_active, etc. retourné classe erreurs non trouvées pour moi dans la boussole.

Cela a cependant:

.viewHover {@extend .selectors-dix par dix: hover; }

.viewActive {@extend .selectors-ten-by-ten: actif; }