9

我正在使用 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');
  }
}

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

4

1 回答 1

21

您可以通过使用您自己的自定义 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像往常一样使用 编译。

于 2012-05-04T21:31:29.887 回答