Obteniendo una lista de archivos en sass/compass

Question

Estoy usando sass y brújula y estoy tratando de crear clases de css para imágenes que coinciden con un patrón dado. El/css resultante destinada sobre todo se ve así:

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

Aunque podría ser posible utilizar la funcionalidad de la brújula de sprites (http://compass-style.org/help/tutorials/spriting/) es inconveniente (ya que generará nuevos archivos) en mi caso ya que las imágenes son ya spritesheets ellos mismos.

Así que ser capaz de hacer algo como

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

sería grande. ¿Hay alguna manera más o menos fácil de hacerlo?

Answer 1

Puede lograr esto complementando las funciones integradas SASS/Compass con su propia función Ruby personalizada. (Ver la sección titulada "Adición de funciones personalizadas" en la referencia SASS here.) Sólo definir un archivo de Ruby (por ejemplo, "Lista-files.rb") con su código personalizado, así:

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 

Entonces, puede incluir este archivo desde el archivo de configuración de la brújula (por ejemplo, "config.rb"):

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

y acceder a ella en su hoja de estilo SASS al igual que deseas:

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

Puede compilar usando compass compile -c config.rb, como es normal.