Sass .scss: घोंसले के शिकार और कई वर्ग?

Question

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

Comments

आपको डबल क्लास चयनकर्ता का उपयोग करना चाहिए। यह समस्या सैस में घोंसले के विकल्प का एक आदर्श उदाहरण है। आपको लगता है कि यहाँ के बारे में सभी को पढ़ सकता है kolosek.com/nesting-in-less-and-sass

— Nesha Zoric

Answer 1

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

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

.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&एक त्रुटि फेंक देंगे।

Comments

बस एक साइड नोट, &छद्म तत्वों और छद्म वर्गों का उपयोग करते समय का एक सामान्य उपयोग है। उदाहरण के लिए &:hover:।

— क्रश

@ पूर्णता की खातिर मैंने इसे अपने उत्तर में जोड़ा। टिप्पणी के लिये आपका धन्यवाद।

— क्रिस्टोफ

धन्यवाद। मुझे लगा कि मैं बेवकूफ हो रहा था क्योंकि यह मूल बातें गाइड में उल्लिखित नहीं है! BTW डॉक्स URL को इसमें स्थानांतरित कर दिया गया है: sass-lang.com/documentation/…

— scipilot

यदि &एक पंक्ति के अंत में उपयोग किया जाता है, तो यह बाकी वर्गों की शुरुआत में अन्य सभी स्तरों पर उस रेखा को डालता है। आप ऐसा करके तत्वों को जोड़ सकते हैं &.descके तहत .container, जिसका परिणाम है, जो यह करने के लिए .desc संलग्न करेंगे.container.desc

— केट मिलर

scss-lint "& :: hover" (डबल कॉलोन) का उपयोग करने का सुझाव देता है

— Marcel Lange

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 कार्यप्रणाली पर आधारित है। आप इस लिंक की जाँच कर सकते हैं: BEM - ब्लॉक एलीमेंट संशोधक पद्धति

Comments

नोटिस यह अच्छा लगता है, लेकिन हर कीमत पर बचा जाना चाहिए। आप भविष्य में मुझे धन्यवाद देंगे जब आप अपने प्रोजेक्ट को खोजने का प्रयास करेंगे .container--descऔर कोई परिणाम नहीं मिलेगा ।

— स्टैम डे

Answer 3

क्रिस्टोफ का जवाब एकदम सही है। हालांकि कभी-कभी आप एक से अधिक कक्षाओं में जाना चाहते हैं। इस मामले में आप की कोशिश कर सकते @at-rootहैं और #{}सीएसएस सुविधाओं जो का उपयोग कर एक दूसरे के बगल में बैठने के लिए दो जड़ वर्गों के लिए सक्षम होगा &।

यह काम नहीं करेगा ( nothing before &नियम के कारण ):

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

    .hello {
        padding-left:50px;
    }
}

लेकिन यह होगा (उपयोग करते हुए @at-root plus #{&}):

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}