सास/कंपास

Question

में फ़ाइलों की एक सूची प्राप्त करना मैं सैस और कंपास का उपयोग कर रहा हूं और मैं किसी दिए गए पैटर्न से मेल खाने वाली छवियों के लिए सीएसएस कक्षाएं बनाने की कोशिश कर रहा हूं। इरादा/जिसके परिणामस्वरूप सीएसएस ज्यादातर इस तरह दिखता है:

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

यह मेरे मामले में कम्पास स्प्राइट कार्यक्षमता (http://compass-style.org/help/tutorials/spriting/) का उपयोग करने के लिए इसे असुविधाजनक है (के रूप में यह नई फ़ाइलें उत्पन्न होगा) के रूप में चित्र हैं संभव हो सकता है पहले ही खुद को spritesheets।

तो जैसे

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

कुछ करने के लिए बहुत अच्छा होगा सक्षम किया जा रहा। क्या ऐसा करने के लिए एक कम या कम आसान तरीका है?

Answer 1

आप अपने स्वयं के कस्टम रूबी फ़ंक्शन के साथ बिल्टिन SASS/Compass फ़ंक्शंस को पूरक करके इसे पूरा कर सकते हैं। ("सूची-files.rb" कहते हैं,) आपके कस्टम कोड के साथ ऐसा तरह (शीर्षक एस.ए.एस.एस. संदर्भ here में "कस्टम कार्य जोड़ना" अनुभाग देखें।) बस एक रूबी फ़ाइल को परिभाषित:

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') 

और यह पहुँच अपने एस.ए.एस.एस. स्टाइलशीट में आप की तरह चाहते हैं:

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

फिर आप सामान्य के रूप में compass compile -c config.rb का उपयोग करके संकलित कर सकते हैं।