Closed saltnpixels closed 8 years ago
This is an awesome plugin I just discovered. But shouldn't you output the classes also? See where I added.
@mixin cssSprite( $spriteVals ) { width: nth( $spriteVals, 1 ); height: nth( $spriteVals, 2 ); background-repeat: no-repeat; background-image: url( #{ nth( $spriteVals, 3 ) } ); background-position: nth( $spriteVals, 4 ) nth( $spriteVals, 5 ); @media only screen and ( -webkit-min-device-pixel-ratio: 2 ), only screen and ( min-device-pixel-ratio: 2 ) { background-image: url( #{ nth( $spriteVals, 6 ) } ); background-size: $bgiSizeW $bgiSizeH; } } $spritePath: 'images/sprite'; $spriteURL: $spritePath + '.png'; $spritex2URL: $spritePath + '@2x.png'; $bgiSizeW: 960px; $bgiSizeH: 223px; $mail: 105px 110px $spriteURL -805px -58px $spritex2URL; $cog: 105px 110px $spriteURL -655px -58px $spritex2URL; $star: 105px 110px $spriteURL -505px -58px $spritex2URL; $revenue: 105px 110px $spriteURL -355px -58px $spritex2URL; $clients: 105px 110px $spriteURL -205px -58px $spritex2URL; $happy: 105px 110px $spriteURL -55px -58px $spritex2URL; //added to generate the classes: $list: $mail "mail", $cog "cog", $star "star", $revenue "revenue", $clients "clients", $happy "happy"; @each $icon in $list{ $class: nth($icon, 2); $sprite: nth($icon, 1); .icon-#{$class}{ @include cssSprite($sprite); } }
Thanks for the proporsal. Added!
This is an awesome plugin I just discovered. But shouldn't you output the classes also? See where I added.