Getting a list of files in sass/compass

Question

I\'m using sass and compass and I am trying to create css classes for images matching a given pattern. The intended/resulting css mostly looks like this:

.class1         


        

Answer 1

You can accomplish this by supplementing the builtin SASS/Compass functions with your own custom Ruby function. (See the section titled "Adding Custom Functions" in the SASS reference here.) Just define a Ruby file (say, "list-files.rb") with your custom code like so:

module Sass::Script::Functions
    def listFiles(path)
        return Sass::Script::List.new(
            Dir.glob(path.value).map! { |x| Sass::Script::String.new(x) },
            :comma
        )
    end
end

Then, you can include this file from your compass configuration file (say, "config.rb"):

require File.join(File.dirname(__FILE__), 'list-files.rb')

And access it in your SASS stylesheet just like you want to:

@each $clazz in listFiles("images/*") {
  .#{$clazz} {
    background-image: url('#{$clazz}.png');
  }
}

You can then compile using compass compile -c config.rb, as normal.