Lấy danh sách các tệp trong sass/compass

Question

Tôi đang sử dụng sass và la bàn và tôi đang cố gắng tạo các lớp css cho hình ảnh khớp với một mẫu nhất định. Các dự định/kết quả css chủ yếu trông như thế này:

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

Trong khi nó có thể là có thể sử dụng các chức năng la bàn sprite (http://compass-style.org/help/tutorials/spriting/) nó là bất tiện (vì nó sẽ tạo ra file mới) trong trường hợp của tôi như là những hình ảnh đã tự spritesheets.

Vì vậy, việc có thể làm điều gì đó như

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

sẽ là tuyệt vời. Có cách nào dễ dàng hơn để làm như vậy không?

Answer 1

Bạn có thể thực hiện việc này bằng cách bổ sung chức năng SASS/Compass được tích hợp với chức năng Ruby tùy chỉnh của riêng bạn. (Xem phần có tiêu đề "Thêm Chức năng Custom" trong tài liệu tham khảo Sass here.) Chỉ cần xác định nộp Ruby (nói, "list-files.rb") với mã tùy chỉnh của bạn như vậy:

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 

Sau đó, bạn có thể đưa tập tin này từ tập tin cấu hình la bàn của bạn (ví dụ, "config.rb"):

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

Và truy cập nó trong stylesheet Sass của bạn cũng giống như bạn muốn:

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

Sau đó, bạn có thể biên dịch bằng cách sử dụng compass compile -c config.rb, như bình thường.