कई एससीएसएस/एसएएसएस फाइलें एक सीएसएस फ़ाइल में हैं?

Question

क्या एसएएस कई एसएएस फाइलों के साथ निर्देशिका को सुनना और एक सीएसएस फ़ाइल उत्पन्न करना संभव है? मैं एक (style.scss) में कई सास फ़ाइलें शामिल कर एक रास्ता मिल गया है:

@import "scss/header"; 
@import "scss/footer"; 

और फिर निम्न कोड चलाएँ:

sass --watch style.scss:style.css 

लेकिन समस्या यह है कि मैं उस फ़ाइल बदलना होगा है इससे पहले कि मैं एक नई सीएसएस फ़ाइल उत्पन्न करता हूं।

Answer 1

यदि आप निर्देशिका देखते हैं, तो सैस @ आयातित फ़ाइलों में परिवर्तनों को नोटिस करने और निर्भर फ़ाइलों को अपडेट करने में सक्षम होगा।

style.scss:

@import "header"; 
@import "footer"; 

और कार्य करें:

sass --watch . 

यह निर्देशिका सीएसएस करने के लिए सभी फ़ाइलों को संकलित कर देगा; उन फ़ाइलों को अनदेखा करना जिनके नाम _ से शुरू होते हैं।

मैं _header.scss या _footer.scss को संशोधित करता हूं, अगर style.scss भी अपडेट करेगा।

आप कर सकते हैं भी एक अन्य निर्देशिका में उत्पादन:

sass --watch .:output_dir/ 

Answer 2

आप एस.ए.एस.एस. बता साथ एक संपूर्ण फ़ोल्डर देखने के लिए कर सकते हैं:

sass --watch application/sass:public/stylesheets 

आप अपने सभी आंशिक फ़ाइलें आयात करते हैं, तो यह एक फ़ाइल उत्पन्न करनी चाहिए। प्रत्येक बार जब आप फ़ोल्डर में फ़ाइल संपादित करते हैं, तो सीएसएस फाइलें स्वचालित रूप से जेनरेट की जाएंगी।

Answer 3

बस, जोड़ने के लिए तुम भी अन्य फ़ाइलों से चर ($) और mixins कॉल कर सकते हैं चाहता था।

उदाहरण के लिए:

_variable.scss = $primary:#000
_header.scss = header {color:$primary;}
_footer.scss = footer {background:$primary}

custom.scss:

+०१२३५१६४१०६

@import "_variables.scss"; 
@import "_header.scss"; 
@import "_footer.scss"; 

आउटपुट = custom.css

header {color:#000;} 
footer {background:#000;}