Created
October 14, 2013 22:21
-
-
Save jgarber623/6983233 to your computer and use it in GitHub Desktop.
Sass 3.3 adds a new SassScript Maps feature that's super handy.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Define those colors. | |
$profiles: ( | |
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 | |
); | |
// Style those links. | |
.profile-link { | |
background: $grey--light; | |
border-radius: em(3); | |
display: block; | |
padding: 0.75em 1em; | |
text-decoration: none; | |
&:focus, | |
&:hover { | |
color: #fff; | |
} | |
} | |
// Style those links on :hover and :focus because we're not savages. | |
@each $profile, $bgcolor in $profiles { | |
.profile-link--#{$profile}:focus, | |
.profile-link--#{$profile}:hover { | |
background: $bgcolor; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ol> | |
<li><a href="#" class="profile-link--bandcamp profile-link">Bandcamp</a></li> | |
<li><a href="#" class="profile-link--delicious profile-link">Delicious</a></li> | |
<li><a href="#" class="profile-link--facebook profile-link">Facebook</a></li> | |
<li><a href="#" class="profile-link--ficly profile-link">Ficly</a></li> | |
<li><a href="#" class="profile-link--flickr profile-link">Flickr</a></li> | |
<li><a href="#" class="profile-link--github profile-link">GitHub</a></li> | |
<li><a href="#" class="profile-link--googleplus profile-link">Google+</a></li> | |
<li><a href="#" class="profile-link--instagram profile-link">Instagram</a></li> | |
<li><a href="#" class="profile-link--kickstarter profile-link">Kickstarter</a></li> | |
<li><a href="#" class="profile-link--lanyrd profile-link">Lanyrd</a></li> | |
<li><a href="#" class="profile-link--lastfm profile-link">Last.fm</a></li> | |
<li><a href="#" class="profile-link--linkedin profile-link">LinkedIn</a></li> | |
<li><a href="#" class="profile-link--photodrop profile-link">PhotoDrop</a></li> | |
<li><a href="#" class="profile-link--pinterest profile-link">Pinterest</a></li> | |
<li><a href="#" class="profile-link--rdio profile-link">Rdio</a></li> | |
<li><a href="#" class="profile-link--soundcloud profile-link">SoundCloud</a></li> | |
<li><a href="#" class="profile-link--twitter profile-link">Twitter</a></li> | |
<li><a href="#" class="profile-link--vimeo profile-link">Vimeo</a></li> | |
<li><a href="#" class="profile-link--youtube profile-link">YouTube</a></li> | |
</ol> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The above is an example of using Sass 3.3's new SassScript Maps feature. Documentation currently available right over here.
See this Gist in action at sixtwothree.org.