获取sass/compass中的文件列表

Question

我正在使用sass和指南针,我正在尝试为匹配给定模式的图像创建css类.预期/结果css大多如下:

.class1 { background-image: url(class1.png); }
.class2 { background-image: url(class2.png); }

尽管可能使用指南针精灵功能(http://compass-style.org/help/tutorials/spriting/),但在我的情况下它是不方便的(因为它会生成新文件)因为图像已经是spritesheets本身.

所以能够做类似的事情

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

会很好.有没有或多或少的简单方法呢？

Answer 1

您可以通过使用自己的自定义Ruby函数补充内置的SASS/Compass函数来实现此目的.(请参阅此处 SASS参考中标题为"添加自定义函数"的部分.)只需使用自定义代码定义Ruby文件(例如"list-files.rb"),如下所示:

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

然后,您可以在罗盘配置文件中包含此文件(例如,"config.rb"):

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

并在您的SASS样式表中访问它,就像您想要:

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

然后你可以compass compile -c config.rb像往常一样使用编译.