Uzyskiwanie listy plików w sass/compass

Question

Używam sass i kompasu i staram się tworzyć klasy css dla obrazów pasujących do danego wzorca. Zamierzony/wynikające css przeważnie wygląda następująco:

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

Chociaż może to być możliwe, aby korzystać z funkcji kompasu sprite (http://compass-style.org/help/tutorials/spriting/) jest niewygodny (jak będzie generować nowe pliki) w moim przypadku jak obrazy są już spritesheets się.

Tak jest w stanie zrobić coś takiego

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

byłoby świetnie. Czy jest to mniej lub bardziej łatwy sposób na zrobienie tego?

Answer 1

Można to osiągnąć poprzez uzupełnienie wbudowanych funkcji SASS/Compass o własną niestandardową funkcję Ruby. (Zobacz sekcję „Dodawanie funkcji użytkownika” w odniesieniu Sass here.) Wystarczy zdefiniować plik Ruby (powiedzmy, „list-files.rb”) z kodem niestandardowym tak:

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 

Następnie można dołączyć ten plik z pliku konfiguracyjnego kompasu (powiedzmy, „config.rb”):

require File.join(File.dirname(__FILE__), 'list-files.rb') 

i do niego dostęp w swoim Sass stylów tak jak chcesz:

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

Możesz następnie skompilować przy użyciu standardu compass compile -c config.rb.