Auto Spriting

auto-sprites.scss

$bem-blocks: (
    "foo",
    "bar",
    "baz"
);

$sprite-files: ();

/*
 * Generate BEM-style silent classes for BEM sprites
 *
 * sprites/foo/
 *   bar-baz.png
 *   qux.png
 *
 * Generates: %foo-sprites__bar-baz and %foo-sprites__qux
 * Provides: width, height and background: <url> <position> no-repeat.
 */
@each $block in $bem-blocks {

    @if str-index($block, "_") {
        @error "BEM sprite blocks must be dasherized.";
    }

    %#{$block}-sprites {

        $map: sprite-map("sprites/#{$block}/*.png", $spacing: 10px);

        // cache sprite-url, because it slows down compass compile
        $url: sprite-url($map);

        @each $name in sprite-names($map) {

            @if str-index($name, "_") {
                @error "BEM sprite files must be dasherized.";
            }

            $sprite-files: map-merge($sprite-files, (
                #{$block}-sprite__#{$name}: sprite-file($map, #{$name})
            ));

            &__#{$name} {
                background: $url sprite-position($map, $name) no-repeat;
                @include sprite-dimensions($map, $name);
            }
        }
    }
}