townsquare/roles.scss

$roles:
  'baron' 'Baron',
  'butler' 'Butler',
  'chef' 'Chef',
  'drunk' 'Drunk',
  'empath' 'Empath',
  'fortuneteller' 'Fortune Teller',
  'imp' 'Imp',
  'investigator' 'Investigator',
  'librarian' 'Librarian',
  'mayor' 'Mayor',
  'monk' 'Monk',
  'poisoner' 'Poisoner',
  'recluse' 'Recluse',
  'ravenkeeper' 'Ravenkeeper' 80%,
  'saint' 'Saint',
  'slayer' 'Slayer',
  'soldier' 'Soldier',
  'spy' 'Spy',
  'scarletwoman' 'Scarlet Woman' 80%,
  'undertaker' 'Undertaker' 85%,
  'virgin' 'Virgin',
  'washerwoman' 'Washerwoman' 75%;

@each $img, $name, $fontsize in $roles {
  .token.#{$img} {
    &:before {
      background-image: url('../img/icon-#{$img}.png');
    }
    &:after {
      content: '#{$name}';
    }
    font-size: $fontsize;
  }

  .reminder.#{$img}:before {
    background-image: url('../img/icon-#{$img}.png');
  }
}