Skip to content

Instantly share code, notes, and snippets.

@unti1x
Last active September 29, 2015 09:54
Show Gist options
  • Save unti1x/64ded41cea16c7ab3ad8 to your computer and use it in GitHub Desktop.
Save unti1x/64ded41cea16c7ab3ad8 to your computer and use it in GitHub Desktop.
Create sprite map for each subdirectory with SASS
require 'sass'
module Sass::Script::Functions
include Sass::Script::Value::Helpers
# returns list of subdirectories to iterate
def subdirs(dir)
assert_type dir, :String
dirs = []
path = dir.value
Dir.foreach(path) do |item|
if File.directory?(path + '/' + item) and not item.start_with? '.'
dirs.push identifier item
end
end
list dirs, :space
end
declare :subdirs, [:string]
end
@mixin spritez($path, $prefix, $base-class) {
$sprite-map: sprite-map($path, $layout: smart);
$sprite-names: sprite-names($sprite-map);
#{$base-class} {
background-image: sprite-url($sprite-map);
background-repeat: no-repeat;
display: inline-block;
}
@each $name in $sprite-names {
.#{$prefix}-#{$name} {
background-position: sprite-position($sprite-map, $name);
@include sprite-dimensions($sprite-map, $name);
}
}
}
$subdirs: subdirs('images/icons');
// creating sprite map for each subdir in $subdirs
@each $dir in $subdirs {
@include spritez("icons/#{$dir}/*.png", "icon-#{$dir}", '.icon-#{$dir}');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment