कम सीएसएस गार्ड बिना मिश्रण के

Question

मैं बस कम हो रहा हूं और यह पता लगाने की कोशिश कर रहा हूं कि मैं बिना मिश्रण के सशर्त सीएसएस स्टेटमेंट कैसे बना सकता हूं। मुझे लगता है कि मेरे पास बहुत सी लाइन सीएसएस कथन हैं जो केवल एक बार होती हैं लेकिन कुछ चर या शर्त पर निर्भर होती हैं और मिश्रणों का उपयोग करना थोड़ा व्यर्थ है क्योंकि इसका पुन: उपयोग नहीं किया जाएगा।

उदाहरण।

body when (@add-margin) { 
    margin-top: 20px; 
} 

लेकिन वह काम नहीं करता:

@add-margin: true; 

body { 
    margin-top: 20px; //I only want this if add-margin is true 
} 

तो आदर्श रूप मैं इस चाहते हैं। एक मिश्रण काम का उपयोग करना लेकिन एक लाइनर के लिए सिर्फ एक बनाने के लिए मूर्खतापूर्ण लगता है। क्या कोई वैकल्पिक तरीका है जो मैं कर सकता हूं?

धन्यवाद

Answer 1

नहीं, यह उस रूप में संभव नहीं है।

आप 0 या 1 के बराबर एक चर का उपयोग कर सकते हैं और 20 से गुणा कर सकते हैं और फिर हमेशा एक नियम आउटपुट कर सकते हैं, या जावास्क्रिप्ट का उपयोग कर सकते हैं (मैं आपको इससे बचने के लिए सलाह दूंगा) 0 या 20 में सही रूपांतरित करने के लिए और हमेशा एक नियम आउटपुट करने के लिए, लेकिन यदि आप चाहते हैं कि संपत्ति सशर्त रूप से जोड़ दी जाए, तो आपको गार्ड की आवश्यकता है।

Answer 2

हाँ आप कर सकते हैं, यह आपके कोड के समान है।

@add-margin: true; 

.margin() when (@add-margin) { 
    margin-top: 20px; 
} 

body { .margin(); } 

अद्यतन: कम के नवीनतम संस्करण का उपयोग करना (1.5+), "पहरा mixins" के उपयोग आप "सीएसएस gaurds" के बजाय इस्तेमाल कर सकते हैं इस लक्ष्य को हासिल करने के लिए आवश्यक नहीं कर रहे हैं, और इसलिए ओ पी के कोड होगा बॉक्स

Answer 3

CSS Guards सुविधा कम v1.5.0 में पेश की गई थी और इसलिए अब हम प्रश्नों में उल्लिखित गार्ड का उपयोग कर सकते हैं।

@add-margin: true; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

मामले में, आप एक ही चर के आधार पर अलग अलग चयनकर्ताओं के लिए कई तरह के गुण आवंटित करने के लिए जरूरत है, यह & चयनकर्ता का उपयोग करके नीचे की तरह लागू किया जा सकता।

& when (@add-margin){ 
    body{ 
     margin-top: 20px; 
    } 
    h1{ 
     margin-top: 10px; 
    } 
} 

नोट: टिप्पणी में memeLab से उल्लेख किया है, true से @add-margin चर अन्य के लिए किसी भी मूल्य considered as falsy हैं। ऐसा इसलिए है क्योंकि true एक कीवर्ड है जबकि 'true' एक स्ट्रिंग मान है। उदाहरण के लिए, नीचे कुछ भी आउटपुट नहीं होगा।

@add-margin: 'true'; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

हालांकि, नीचे काम करेगा क्योंकि यह एक स्ट्रिंग तुलना करता है।

@add-margin: 'true'; 

body when (@add-margin = 'true'){ 
    margin-top: 20px; 
} 

आप कम संकलक v1.5.0 की तुलना में कम तो जवाब Unicornist द्वारा पोस्ट की गई उपयोग कर रहे हैं सबसे अच्छा शर्त है।