सास। एससीएसएस: नेस्टिंग और एकाधिक कक्षाएं?

Question

मैं अपने वर्तमान प्रोजेक्ट के लिए सैस (.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 के अंदर कैसे घोंसला कर सकता हूं?

Answer 1

आप संकलन के बाद माता-पिता चयनकर्ता द्वारा parent selector reference&, यह बदल दिया जाएगा उपयोग कर सकते हैं:

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

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

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

& पूरी तरह से, हल होगा इसलिए यदि आपके माता-पिता चयनकर्ता नीडिंत है खुद, घोंसले को & को बदलने से पहले हल किया जाएगा।

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

हालांकि, अगर आप & पर वास्तव में किसी भी स्थिति में आप ^* चाहते जगह कर सकते हैं, तो निम्न भी संभव है::

इस टिप्पणी को सबसे अधिक बार pseudo-elements and -classes लिखने के लिए प्रयोग किया जाता है

.container { 
    background:red; 
    #id &{ 
     background:blue; 
    } 
} 

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

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

*: व्हाइटस्पेस से कोई अन्य पात्रों & के सामने की अनुमति है। तो आप selector + & - #id& का प्रत्यक्ष समन्वय नहीं कर सकते हैं।

Answer 2

यदि ऐसा है, तो मुझे लगता है कि आपको कक्षा का नाम या कक्षा नाम सम्मेलन बनाने का बेहतर तरीका उपयोग करने की आवश्यकता है। उदाहरण के लिए, जैसा कि आपने कहा था कि आप .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; 
} 

ऊपर कोड वर्ग नामकरण सम्मेलनों में कार्यलय पद्धति पर आधारित है

एससीएसएस: आप ऐसा कर सकते हैं। आप इस लिंक को देख सकते हैं: BEM — Block Element Modifier Methodology