Add a list of emoticons

This SASS code will automatically create a sprite from all of the images located in the [source]/chat/emoticons/ folder. The $list var is a list of all the names of the images in this folder. We create a default .emoticon class with the correct sprite background (I used size here, to support retina). The @each loops through all of the smileys in the list and extends the .emoticon class with a class for the name of that smiley. The $pos and background-position are then generated. Using <span class="emoticon angry"></span> will then show an angry little face.

$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