Skip to content

Instantly share code, notes, and snippets.

@stryju
Last active December 14, 2015 20:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stryju/5143338 to your computer and use it in GitHub Desktop.
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
@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 ));
}
}
}
}
}
/*
* \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