SASS में @extend के माध्यम से सिलेक्टर सीक्वेंस का मर्ज होना

यदि हमें सिलेक्टर अनुक्रमों को मर्ज करने की आवश्यकता है, तो हम @extend निर्देश का उपयोग भी करते हैं:

निम्नलिखित उदाहरण पर विचार करें:

style.scss#main .list p {
  font-weight: bold;
}
#sub .resume .link {
  @extend p;
}

css फ़ाइल में कंपाइल किए गए कोड पर ध्यान दें, जब दो अनुक्रम मर्ज होते हैं, जिनमें कोई सामान्य सिलेक्टर नहीं होते हैं, तो स्वचालित रूप से नए सिलेक्टर बनते हैं: एक पहले अनुक्रम के साथ दूसरे के सामने और एक दूसरे अनुक्रम के साथ पहले के सामने:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

ऐसे मामले में, जब अनुक्रमों का एक सामान्य सिलेक्टर होता है, तो वे एक साथ मर्ज हो जाएंगे और केवल अंतर (यदि कोई हो) ही वैकल्पिक होंगे। निम्नलिखित उदाहरण में दोनों अनुक्रमों में आइडेंटिफायर #main है:

style.scss#main .list p {
  font-weight: semi-bold;
}
#main .resume .link {
  @extend p;
}

कंपाइलेशन के परिणामस्वरूप ये दोनों आइडेंटिफायर मर्ज हो जाएंगे:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

styles.scssdiv p {
  font-size: 12px;
  padding-bottom: 4px;
}
link button #card-title {
  @extend p;
}