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函数来实现此目的。（请参阅标题为＆＃34;添加自定义函数＆＃34;在SASS参考here中的部分。）只需使用您的自定义定义Ruby文件（例如，＆＃34; list-files.rb＆＃34;）像这样的代码：

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

然后，您可以在指南针配置文件中包含此文件（例如，＆＃34; config.rb＆＃34;）：

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进行编译。

获取sass / compass中的文件列表

1 个答案: