SASS Map Example

sass-map.html

<div class="thingie-do thingie-do--bandcamp">bandcamp</div>
<div class="thingie-do thingie-do--delicious">delicious</div>
<div class="thingie-do thingie-do--facebook">facebook</div>
<div class="thingie-do thingie-do--ficly">ficly</div>
<div class="thingie-do thingie-do--flickr">flickr</div>
<div class="thingie-do thingie-do--github">github</div>
<div class="thingie-do thingie-do--googleplus">googleplus</div>
<div class="thingie-do thingie-do--instagram">instagram</div>
<div class="thingie-do thingie-do--kickstarter">kickstarter</div>
<div class="thingie-do thingie-do--lanyrd">lanyrd</div>
<div class="thingie-do thingie-do--lastfm">lastfm</div>
<div class="thingie-do thingie-do--linkedin">linkedin</div>
<div class="thingie-do thingie-do--photodrop">photodrop</div>
<div class="thingie-do thingie-do--pinterest">pinterest</div>
<div class="thingie-do thingie-do--rdio">rdio</div>
<div class="thingie-do thingie-do--soundcloud">soundcloud</div>
<div class="thingie-do thingie-do--twitter">twitter</div>
<div class="thingie-do thingie-do--vimeo">vimeo</div>
<div class="thingie-do thingie-do--youtube">youtube</div>

sass-map.scss

$thingie-do-map: (
 bandcamp: #4e9bac,
 delicious: #248cff,
 facebook: #3b5998,
 ficly: #b51c2c,
 flickr: #0063db,
 github: #4183c4,
 googleplus: #dd4b39,
 instagram: #517fa4,
 kickstarter: #76cc1e,
 lanyrd: #152e51,
 lastfm: #d51007,
 linkedin: #007bb6,
 photodrop: #cdb6e3,
 pinterest: #cb2027,
 rdio: #0088da,
 soundcloud: #f60,
 twitter: #00aced,
 vimeo: #aad450,
 youtube: #b00
);

.thingie-do {
  padding: 1em;
  background-color: #ccc;
}

@each $name, $value in $thingie-do-map {
  .thingie-do--#{$name} {
    background-color: $value;
    color: lighten($value, 80%);
  }
}