获取 sass/compass 中的文件列表

Question

我正在使用 sass 和 compass，我正在尝试为匹配给定模式的图像创建 css 类。 预期/生成的 css 大多如下所示：

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

虽然可能可以使用指南针精灵功能 (http://compass-style.org/help/tutorials/spriting/)，但在我的情况下，这很不方便（因为它会生成新文件），因为图像本身就是精灵表。

所以能够做类似的事情

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

会很棒。 有或多或少简单的方法吗？

Answer 1

您可以通过使用您自己的自定义 Ruby 函数补充内置 SASS/Compass 函数来完成此操作。 （请参阅 SASS 参考文献here 中标题为“添加自定义函数”的部分。）只需使用您的自定义代码定义一个 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 进行编译。