Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS Map Example
<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>
$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%);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.