Este código SASS criará automaticamente um sprite de todas as imagens localizadas na pasta [fonte] / chat / emoticons /. A $ list var é uma lista de todos os nomes das imagens nesta pasta. Criamos uma classe padrão .emoticon com o fundo de sprite correto (usei o tamanho aqui, para suportar retina). O @each percorre todos os smileys na lista e estende a classe .emoticon com uma classe para o nome desse smiley. A $ pos e a posição de fundo são então geradas. Usar <span class = “emoticon angry”> </span> mostrará uma carinha zangada.
$icon-map: sprite-map("chat/emoticons/*.png")
$list: angry bluecry blueshock bluexlshock crazy cry crylaugh dead grin happy kiss lovehappy no nodont nowkiss ohcrywhy ohgodno sick sleepyhappy smirk stupidhappy unhappy unhappycry what whocares wink xlangry xlhappy xlunhappy xxlhappy
.emoticon
background: $icon-map
width: 24px
height: 24px
background-size: 24px 744px
@each $smiley in $list
.emoticon.#{$smiley}
$pos: sprite-position($icon-map, #{$smiley})
background-position: nth($pos, 1) / 2 nth($pos, 2) / 2