littlebusters / Sketch-CSS-Sprite-Mixin

Generate a code of CSS Sprite Mixin to Clipboard in Sketch.
104 stars 16 forks source link

generate the classes #7

Closed saltnpixels closed 8 years ago

saltnpixels commented 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);
   }
}
littlebusters commented 8 years ago

Thanks for the proporsal. Added!