Last active
December 14, 2015 20:19
-
-
Save stryju/5143338 to your computer and use it in GitHub Desktop.
sprite placeholder generator still in development, expect performance tweaks and some clean-up
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 sprite-placeholders( $glob, $dimensions: true, $layout: smart ){ | |
$map : sprite-map( $glob, $layout : $layout ); | |
$name : sprite-map-name( $map ) + '-sprite'; | |
$widths : (); | |
$heights : (); | |
$unified-widths : false; | |
$unified-heights : false; | |
// check if they share width/height | |
@if dimensions { | |
@each $sprite in sprite-names( $map ){ | |
@if length( $widths ) < 2 or length( $heights ) < 2 { | |
$width : image-width( sprite-file( $map, $sprite )); | |
$height: image-height( sprite-file( $map, $sprite )); | |
@if not index( $widths, $width ) { | |
$widths : append( $widths, $width ); | |
} | |
@if not index( $heights, $height ) { | |
$heights : append( $heights, $height ); | |
} | |
} | |
} | |
$unified-widths : ( length( $widths ) < 2 ); | |
$unified-heights : ( length( $heights ) < 2 ); | |
} | |
%#{$name} { | |
background-image: $map; | |
@if dimensions { | |
@if $unified-widths { | |
width: $widths; | |
} | |
@if $unified-heights { | |
height: $heights; | |
} | |
} | |
@content; | |
} | |
@each $sprite in sprite-names( $map ){ | |
%#{$name}-#{$sprite} { | |
@extend %#{$name}; | |
background-position: sprite-position( $map, $sprite ); | |
@if $dimensions { | |
@if not $unified-widths { | |
width: image-width( sprite-file( $map, $sprite )); | |
} | |
@if not $unified-heights { | |
height: image-height( sprite-file( $map, $sprite )); | |
} | |
} | |
} | |
} | |
} |
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
/* | |
* \foo | |
* +- bar.png | |
* +- baz.png | |
* +- foo.png | |
*/ | |
@include sprite-placeholders( 'foo/*.png' ){ | |
display: inline-block; | |
vertical-align: top; | |
} | |
/* | |
* this will generate placeholders: | |
* %foo-sprite ( general ) | |
* %foo-sprite-bar | |
* %foo-sprite-baz | |
* %foo-sprite-foo | |
*/ | |
// ok, now "WTF, no!" moment: | |
.foo { | |
@extend %foo-sprite-foo; | |
} | |
.bar { | |
@extend %foo-sprite-bar; | |
} | |
.baz { | |
@extend %foo-sprite-baz; | |
} | |
/* generates selector in this order: | |
* .bar { ... } | |
* .baz { ... } | |
* .foo { ... } | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment