@extend में SASS में !optional लेबल

एक सेलेक्टर का विस्तार करते समय एक त्रुटि हो सकती है, जब @extend निर्देश सही ढंग से काम नहीं करती है। उदाहरण के लिए, यदि आपके पास निम्नलिखित कोड है:

style.scssa.info {
  @extend .main;
}

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

इसके अलावा, एक त्रुटि होगी यदि सेलेक्टर जिसमें .main हो वह इस प्रकार हो: h1.main, जिसे a और h1 के बीच संघर्ष द्वारा समझाया जाता है।

इसलिए, आवश्यकता पड़ने पर, आप @extend निर्देश को अनुमति दे सकते हैं कि वह वैकल्पिकता लेबल का उपयोग करके नए सेलेक्टर न बनाए !optional, जिसे सेलेक्टर के बाद लिखा जाता है। उदाहरण के लिए:

style.scssa.info {
  @extend .main !optional;
}