sass
घोंसला करने की क्रिया

मूल घोंसला बनाना

जब भी आप किसी अन्य नियम के अंदर एक नए नियम की घोषणा करते हैं तो उसे नेस्टिंग कहा जाता है। मूल नेस्टिंग के साथ, जैसा कि नीचे दिखाया गया है, नेस्टेड चयनकर्ता को एक नए सीएसएस चयनकर्ता के रूप में संकलित किया जाएगा, जिसके सभी माता-पिता पहले से ही एक स्थान से अलग हैं।

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

घोंसले की गहराई

घोंसला बनाना एक बहुत शक्तिशाली विशेषता है, लेकिन सावधानी के साथ इसका उपयोग किया जाना चाहिए। यह काफी आसानी से और जल्दी से हो सकता है, कि आप घोंसले बनाना शुरू करते हैं और सभी बच्चों को एक घोंसले में, एक घोंसले के घोंसले में शामिल करते हैं। मुझे प्रदर्शित करें:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

समस्या

विशेषता

ऊपर दिए गए उदाहरण से li margin सेट है। मान लें कि हम बाद में मीडिया-क्वेरी में इसे ओवरराइड करना चाहते हैं।

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

इसलिए जब भी आप एक निश्चित मूल्य को अधिलेखित करना चाहते हैं, तब तक परिणामी रूप से गहरा घोंसला करके आपको फिर से गहरा घोंसला बनाना होगा। इससे भी बदतर, यह अक्सर वह जगह है जहां नियम !important

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

क्यों !important है-एक बुरा विचार है

आपको अपने SCSS को एक अच्छे अंदाज़ में लिखना चाहिए कि ये वर्कअराउंड पहली जगह में भी आवश्यक नहीं हैं। इस तरह के मामूली मुद्दे पर !important का उपयोग करना आपको पहले से ही एक खरगोश छेद नीचे ले जाएगा!

पुनर्प्रयोग

यह काफी हद तक विशिष्टता की समस्या के समान है, लेकिन अलग से इंगित करने लायक है। यदि आप बटन या ड्रॉपडाउन जैसी किसी चीज़ को स्टाइल करते हैं, तो आप शायद उन शैलियों को अपने पृष्ठ पर कहीं और पुनः उपयोग करना चाहें।

बहुत गहराई से घोंसले बनाने से आपकी शैली केवल सबसे बाहरी माता-पिता (आपके SCSS के शीर्ष पर स्थित तत्व) के अंदर बैठे तत्वों से जुड़ी होती है। यह आपको शैलियों की प्रतिलिपि बनाने और उन्हें कहीं और फिर से पेस्ट करने की ओर ले जाता है। संभवतः एक अन्य नेस्टेड नियम में।

आपकी स्टाइलशीट बड़ी और बड़ी हो जाएंगी और बनाए रखना मुश्किल हो जाएगा।

आपको कितना गहरा घोंसला बनाना चाहिए?

अधिकांश स्टाइलगाइड्स अधिकतम गहराई को 2 पर सेट करते हैं। यह सामान्य रूप से अच्छी सलाह है, क्योंकि बहुत कम ही मौके होते हैं जहां आप गहरा घोंसला बनाना चाहते हैं। ज्यादातर समय, 2 पर्याप्त है।

@ एट-रूट के साथ घोंसला बनाना

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

उदाहरण के लिए, आप इस तरह से कुछ कर सकते हैं:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

यह इसके लिए संकलित होगा:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

ऐसा करने से, .item वर्ग से संबंधित हमारी सभी शैलियाँ .item में एक साथ हैं, लेकिन हमें हर चयनकर्ता में उस वर्ग की आवश्यकता नहीं है।

संदर्भों को छोड़कर

किसी भी संदर्भ में डिफ़ॉल्ट रूप से @at-root अंदर दिखाई देगा। इसका मतलब है कि उदाहरण के लिए @media ब्लॉक के अंदर नियम बने रहेंगे।

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

यह हमेशा वांछित व्यवहार नहीं होता है, इसलिए आप media को @at-root निर्देश के विकल्प के without media पास करके बाहर कर सकते हैं।

@at-root (without: media) {..

अधिक जानकारी के लिए, आधिकारिक दस्तावेज देखें

मूल चयनकर्ता (&)

नेस्टिंग संबंधित चयनकर्ताओं को अपने कोड को समझने के लिए भविष्य के डेवलपर्स के लिए आसान बनाने के लिए एक साथ रखने के लिए बहुत अच्छा है। मूल चयनकर्ता, जो एक एम्परसैंड ("और") द्वारा प्रस्तुत किया गया है, अधिक जटिल परिस्थितियों में ऐसा करने में मदद कर सकता है। इसके इस्तेमाल के कई तरीके हो सकते हैं।

एक नया चयनकर्ता बनाएं, जो माता-पिता चयनकर्ता के बाद सीधे नए चयनकर्ता को रखकर दोनों मूल चयनकर्ता और दूसरे तत्व की आवश्यकता हो।

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

माता-पिता नेस्टेड चयनकर्ता के बाद माता-पिता चयनकर्ता रखकर संकलित सीएसएस में एक नेस्टेड चयनकर्ता के बाद दिखाई देते है।

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

राज्यों और छद्म तत्वों

कक्षाओं और बच्चों के लिए घोंसले के शिकार के अलावा, माता-पिता के चयनकर्ता के साथ घोंसले के शिकार का उपयोग आमतौर पर :active :hover और :focus लिंक के लिए :focus लिए किया जाता है।

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

इसी तरह, आप मूल चयनकर्ता के साथ नेस्टिंग करके छद्म तत्वों को स्टाइल कर सकते हैं।

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

घोंसले के गुण

कुछ सीएसएस गुण नामस्थान से संबंधित हैं, उदाहरण के लिए border-right border नामस्थान से संबंधित है। कम लिखने के लिए, हम संपत्ति के घोंसले के शिकार का उपयोग कर सकते हैं, और कई स्तरों पर भी इन उपसर्गों को छोड़ सकते हैं।

अगर हम सही पर एक सीमा बनाने के लिए आवश्यक है और नाम के एक वर्ग के लिए छोड़ दिया .borders हम इस लिख सकते हैं:

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

यह हमें border-right और border-left लिखने के लिए बचाता है, हालांकि हम अभी भी लाइनों को 1px solid black और 1px solid red के साथ 1px solid black कोड लिख रहे हैं। हम फ़ोलोइंग के साथ अभी भी कम दोहराए जाने वाले CSS लिख सकते हैं:

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}