दिलचस्प पोस्ट
javax.crypto.BadPaddingException PHP – कई वर्गों में फाइल करने के लिए लॉगिंग तंत्र को लागू करें क्या एचटीएमएल में एक वीआर (ऊर्ध्वाधर नियम) है? Symfony2 विस्तारित DefaultAuthenticationSuccessHandler त्रुटि java.lang.OutOfMemoryError: जीसी ओवरहेड सीमा पार हो गई है समारोह mysql_real_escape_string के पीडीओ समकक्ष क्या है? शुद्ध जेपीए सेटअप में डाटाबेस कनेक्शन प्राप्त करना पोस्टग्रेएसक्यूएल में दो तिथियों के बीच समय सीमा उत्पन्न करना संसाधनों से DisplayName विशेषता? पर्यावरण का उपयोग करके ओएस निर्धारित करें। OSVersion नोहुप और एम्परसेंड में क्या अंतर है IPhone5 पर लॉन्च स्क्रीन पर काले सलाखों (और iPhone6) एनजीएन रिवर्स प्रॉक्सी एकाधिक बैकएंड्स सभी जांच चेकबॉक्स कैसे प्राप्त करें क्या डि कंटेनर के माध्यम से बनाए गए ऑब्जेक्ट्स को आरम्भ करने के लिए कोई पैटर्न है

एसस। एससीएसएस: नेस्टिंग और कई वर्गों?

मैं अपने वर्तमान परियोजना के लिए Sass (.scss) का उपयोग कर रहा हूँ।

निम्नलिखित उदाहरण:

एचटीएमएल

<div class="container desc"> <div class="hello"> Hello World </div> </div> 

एससीएसएस

 .container { background:red; color:white; .hello { padding-left:50px; } } 

यह महान काम करता है

नेस्टेड शैलियों का उपयोग करते समय मैं कई वर्गों को संभाल सकता हूँ

ऊपर दिए गए नमूने में मैं इस बारे में बात कर रहा हूं:

सीएसएस

 .container.desc { background:blue; } 

इस स्थिति में सभी div.container सामान्य रूप से red लेकिन div.container.desc नीले रंग का होगा।

सास के साथ container अंदर मैं कैसे घोंसला कर सकता हूं?

Solutions Collecting From Web of "एसस। एससीएसएस: नेस्टिंग और कई वर्गों?"

आप अभिभावक चयनकर्ता संदर्भ का उपयोग कर सकते हैं & , संकलन के बाद इसे मूल चयनकर्ता द्वारा प्रतिस्थापित किया जाएगा:

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

 .container { background:red; &.desc{ background:blue; } } /* compiles to: */ .container { background: red; } .container.desc { background: blue; } 

& पूरी तरह से हल होगा, इसलिए यदि आपके अभिभावक चयनकर्ता ने नेस्ट किया है, तो नेस्टिंग को & ;

इस संकेतन का उपयोग ज्यादातर छद्म तत्वों और वर्गों को लिखने के लिए किया जाता है:

 .element{ &:hover{ ... } &:nth-child(1){ ... } } 

हालांकि, आप वस्तुतः किसी भी स्थिति में & जगह रख सकते हैं * , इसलिए निम्नलिखित भी संभव है:

 .container { background:red; #id &{ background:blue; } } /* compiles to: */ .container { background: red; } #id .container { background: blue; } 

हालांकि ध्यान रखें कि यह किसी तरह आपके नेस्टिंग संरचना को तोड़ता है और इस प्रकार आपकी स्टाइलशीट में एक विशिष्ट नियम खोजने के प्रयास में वृद्धि हो सकती है।

*: सफेद स्थानों की तुलना में कोई अन्य अक्षर की अनुमति नहीं है तो आप selector + &#id& एक सीधे संयोजन नहीं कर सकते हैं & एक त्रुटि फेंक सकते हैं।

अगर ऐसा मामला है, तो मुझे लगता है कि आपको एक वर्ग के नाम या क्लास का नाम सम्मेलन बनाने का बेहतर तरीका इस्तेमाल करना होगा। उदाहरण के लिए, जैसे आपने कहा था कि आप चाहते हैं। .container वर्ग को एक विशिष्ट उपयोग या उपस्थिति के अनुसार अलग-अलग रंग के लिए करना चाहिए। तुम यह केर सकते हो:

एससीएसएस

 .container { background: red; &--desc { background: blue; } // or you can do a more specific name &--blue { background: blue; } &--red { background: red; } } 

सीएसएस

 .container { background: red; } .container--desc { background: blue; } .container--blue { background: blue; } .container--red { background: red; } 

उपरोक्त कोड कक्षा नामकरण सम्मेलनों में बीईएम पद्धति पर आधारित है। आप इस लिंक की जांच कर सकते हैं: बीईएम – ब्लॉक एलीमेंट मोडिफायर पद्धति