sass/compassでファイルのリストを取得する

Question

私はsassとcompassを使用しています。与えられたパターンに一致する画像のCSSクラスを作成しようとしています。コンパススプライト機能（http://compass-style.org/help/tutorials/spriting/）を使用することは可能かもしれませんが（それは新しいファイルが生成されるように）画像であるとして、それは私の場合には不便である

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

： 意図/結果のCSSは、主に次のようになりますすでにスプライトシートそのもの。

ので

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

ような何かを行うことができることは素晴らしいことです。 多かれ少なかれ簡単な方法がありますか？

Answer 1

これは、組み込みのSASS/Compass関数を独自のカスタムRuby関数で補うことで実現できます。 （SASSで「カスタム機能の追加」というタイトルのセクションがhereを参照してください。）ちょうどそうのようなカスタムコードで（たとえば、「リスト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を使用してコンパイルできます。