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

これは、組み込みのSASS/Compass関数に独自のカスタムRuby関数を追加することで実現できます。（ここの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 に答える