Adicione uma lista de emoticons

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