सीएसएस-रिडंडेंसी कम और उसके @import

Question

का उपयोग करते समय मुझे वास्तव में LESS की विचार और अवधारणा पसंद है। फिर भी मैंने एक बग पर ठोकर खाई, जिसे मैंने कुछ समय पहले लेखक को बताया था लेकिन अभी तक कोई प्रतिक्रिया नहीं मिली है। शायद यह सिर्फ मुझे कुछ गलत कर रहा है।

मेरे application.less -File है कि इस के समान दिखता है:

@import "reset"; 
@import "config"; 
@import "header"; 
@import "forms"; 
[…] 

मुझे पसंद है कि यह मेरी फ़ाइलों को विभाजित करने के लिए अपने सीएसएस-घोषणाओं की एक बेहतर सिंहावलोकन हासिल करने के लिए @import नियम का उपयोग करना संभव है। फिर भी प्रत्येक आयातित फ़ाइल को config.less-file फिर से को फिर से आयात करने की आवश्यकता है ताकि मैं वहां परिभाषित मिश्रित और चर के उपयोग को सक्षम कर सकूं।

मुझे यकीन है कि आप पहले से ही जानते हैं कि मैं किस प्रकार की अनावश्यकता पर गाड़ी चला रहा हूं: हर बार config.less आयात किया जाता है, इसका "आउटपुट" application.css का हिस्सा बन जाता है।

मेरी कॉन्फ़िगरेशन फ़ाइल में कोड की लगभग 200 पंक्तियां हैं। चूंकि मैंने अपने सीएसएस को लगभग 5 फाइलों में विभाजित किया है (मेरे नियंत्रक नामों के आधार पर) जिन्हें कॉन्फ़िगर को दोबारा आयात करने की आवश्यकता है, मैं उत्पन्न होने वाली सीएसएस-कोड की लगभग 1000 लाइनें समाप्त करता हूं जो 100% अनावश्यक हैं।

केवल समाधान जो मैं साथ आ सकता हूं वह मेरी फाइलों को विभाजित नहीं करना है, जो मैं वास्तव में टालना चाहता हूं।

Answer 1

हालांकि आदर्श नहीं है, इसके लिए व्यावहारिक कारण यह है कि आपके द्वारा सैद्धांतिक रूप से आयात की जाने वाली फ़ाइलों को किसी भी सीएसएस को रखने की आवश्यकता नहीं है।

lib.less: आमतौर पर, आप चर और गतिशील mixins, जो अपने सीएसएस उत्पादन के लिए योगदान नहीं होता

#colors { 
    @blue: #0011ff; 
    @red: #ee2222; 
} 
.button (@width: 10px) {...} 

main.less:

@import "lib"; 

a { color: #colors[@blue]; } 

उत्पादन, मुख्य। सीएसएस:

a { color: #0011ff; } 

#colors {} and .button इस मामले में आउटपुट नहीं होगा।

Answer 2

शायद आप उन्हें अपने विकास पर्यावरण में विभाजित कर सकते हैं और फिर अपने लाइव वेब सर्वर पर तैनात करते समय, सभी अतिरिक्त कोड की आवश्यकता नहीं होने पर उन्हें एक साथ विलय कर सकते हैं?

Answer 3

यदि आप . के बजाय $ का उपयोग करके घोषित और मिश्रित हैं तो आप अपनी कम कॉन्फ़िगरेशन फ़ाइल में गतिशील मिश्रण का उपयोग कर सकते हैं।

config.less में:

$mixin 
{ 
    a { color: @light; } 
    h2 { //etc. 
} 

header.less में:

@import "config"; 
.header 
{ 
    $mixin; 
} 

Source। मैंने यह भी कोशिश की है और यह काम करता है।

Answer 4

कम अब @import-once "stylename.less";