Skip to content

Instantly share code, notes, and snippets.

@ryanahamilton
Created October 28, 2013 20:27
Show Gist options
  • Save ryanahamilton/7204009 to your computer and use it in GitHub Desktop.
Save ryanahamilton/7204009 to your computer and use it in GitHub Desktop.
SASS Hash as workaround for not being able to interpolate variable names.
a {
display: block;
width: 60px;
height: 60px;
line-height: 70px;
text-align: center;
font-size: 30px;
color: #fff;
@include transition(background-color 0.3s);
$media-hash: instagram $instagram-color, pinterest $pinterest-color, google-plus $google-plus-color, tumblr $tumblr-color, feedly $feedly-color;
@each $media in $media-hash {
$color: nth($media, 2);
&.#{nth($media, 1)} {
background-color: lighten($color ,20%);
&:hover,
&:focus {
background-color: $color;
}
}
}
&.feedly {
background: lighten($feedly-color,20%) image-url('sidebar/sprite-connect.png') no-repeat 15px 17px;
}
}//a
a {
display: block;
width: 60px;
height: 60px;
line-height: 70px;
text-align: center;
font-size: 30px;
color: #fff;
@include transition(background-color 0.3s);
&.instagram {
background-color: lighten($instagram-color,20%);
&:hover,
&:focus {
background-color: $instagram-color;
}
}//&.instagram
&.pinterest {
background-color: lighten($pinterest-color,20%);
&:hover,
&:focus {
background-color: $pinterest-color;
}
}//&.pinterest
&.google-plus {
background-color: lighten($google-plus-color,20%);
&:hover,
&:focus {
background-color: $google-plus-color;
}
}//&.google-plus
&.tumblr {
background-color: lighten($tumblr-color,20%);
&:hover,
&:focus {
background-color: $tumblr-color;
}
}//&.tumblr
&.feedly {
background: lighten($feedly-color,20%) image-url('sidebar/sprite-connect.png') no-repeat 15px 17px;
&:hover,
&:focus {
background-color: $feedly-color;
}
}//&.feedly
}//a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment