Created
August 8, 2012 19:05
-
-
Save greylabel/3297654 to your computer and use it in GitHub Desktop.
SASS mixin image replacement helper for a series of links
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
/** | |
* @mixin service-links($services, $attribute: class, $prefix: "", $suffix: "") | |
* | |
* Image replacement helper for a series of links | |
* | |
* @param: $services | |
* list of service names -- these should match classes of hrefs on | |
* the <a> in markup and string value in the sprite file name | |
* @param: $attribute | |
* the <a> attribute that will be used for the CSS selector | |
* options: class href | |
* @param: $prefix | |
* string vavlue before the serive name in sprite file name | |
* @param: $suffix | |
* string value after the serive name in sprite file name | |
* | |
*/ | |
@mixin service-links($services, $attribute: class, $prefix: "", $suffix: "") { | |
a { | |
@include hide-text(); | |
@include inline-block(); | |
@each $service in $services{ | |
@if $attribute == class { | |
&.#{$service} { | |
@include sprites-sprite(#{$prefix}#{$service}#{$suffix}); | |
line-height: sprites-sprite-height(#{$prefix}#{$service}#{$suffix}); | |
height: sprites-sprite-height(#{$prefix}#{$service}#{$suffix}); | |
width: sprites-sprite-width(#{$prefix}#{$service}#{$suffix}); | |
} | |
} | |
@else if $attribute == href { | |
&[href*="#{service}"] { | |
@include sprites-sprite(#{$prefix}#{$service}#{$suffix}); | |
line-height: sprites-sprite-height(#{$prefix}#{$service}#{$suffix}); | |
height: sprites-sprite-height(#{$prefix}#{$service}#{$suffix}); | |
width: sprites-sprite-width(#{$prefix}#{$service}#{$suffix}); | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment