Last active
September 29, 2015 09:54
-
-
Save unti1x/64ded41cea16c7ab3ad8 to your computer and use it in GitHub Desktop.
Create sprite map for each subdirectory with SASS
This file contains hidden or 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
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 |
This file contains hidden or 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 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