sass
विस्तार / वंशानुक्रम

वाक्य - विन्यास

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

पैरामीटर

टिप्पणियों

एक कक्षा बढ़ाएँ

.message
  color: white

.message-important
  @extend .message
  background-color: red

यह .message से सभी शैलियों को ले जाएगा और उन्हें .message-important जोड़ देगा। यह निम्नलिखित सीएसएस उत्पन्न करता है:

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

कई वर्गों से बढ़ाएँ

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

उपरोक्त कोड में @extend का उपयोग एक लाइन में कई वर्गों के कोड को .message-important जोड़ने के लिए किया जाता है, हालाँकि, इस तरह प्रति पंक्ति एक विस्तार का उपयोग करना संभव है:

.message-important
    @extend .message
    @extend .important

या तो इन विधियों में से एक निम्नलिखित सीएसएस उत्पन्न करेगा:

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

चैनिंग का विस्तार

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

यह कोड .message-error को .message-important से विस्तारित करने का कारण बनता है, जिसका अर्थ है कि इसमें .message-important और .message दोनों का कोड होगा, क्योंकि .method-important .message से .message । यह निम्नलिखित सीएसएस में परिणाम:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

डिस्क्लेमर: सुनिश्चित करें कि आप जिस वर्ग (तों) को कोड में केवल एक बार ला रहे हैं, अन्यथा सास कुछ गड़बड़, दृढ़ सीएसएस उत्पन्न कर सकती है।

वैकल्पिक विस्तार

कभी-कभी, आप वैकल्पिक रूप से एक @extend चाहते हैं, और आपके कोड में निर्दिष्ट वर्ग की आवश्यकता नहीं हो सकती है।

.message-important
  @extend .message !optional
  background: red

यह निम्नलिखित सीएसएस में परिणाम होगा:

.message-important {
  background: red;
}

डिस्क्लेमर: यह विकास के दौरान उपयोगी है जब आपके पास अभी तक लिखे गए सभी कोड नहीं हो सकते हैं और त्रुटियां नहीं चाहते हैं, लेकिन इसे संभवतः उत्पादन में हटा दिया जाना चाहिए क्योंकि इससे अप्रत्याशित परिणाम हो सकते हैं।

प्लेसहोल्डर

कभी-कभी आप ऐसी कक्षाएं बनाएंगे जो अपने आप में उपयोग नहीं की जाएंगी, बल्कि केवल अन्य नियम सेटों के अंदर विस्तारित की जाएंगी। इसका मतलब है कि संकलित सीएसएस फ़ाइल की तुलना में यह बड़ा होना चाहिए। प्लेसहोल्डर चयनकर्ता इस समस्या को हल करते हैं।

प्लेसहोल्डर चयनकर्ता वर्ग चयनकर्ताओं के समान हैं, लेकिन वे कक्षाओं के लिए उपयोग किए जाने वाले (।) के बजाय प्रतिशत चरित्र (%) का उपयोग करते हैं। वे संकलित सीएसएस में नहीं दिखेंगे।

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

यह निम्नलिखित सीएसएस को संकलित करेगा:

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

जनक का विस्तार करना

आमतौर पर माता-पिता को आगे बढ़ाने की कोशिश करना:

.parent {
  style: value;

  @extend &;
}

परिणाम में त्रुटि होगी, यह बताते हुए कि माता-पिता को नहीं बढ़ाया जा सकता है। यह समझ में आता है, लेकिन एक समाधान है। बस पैरेंट सेलेक्टर को वेरिएबल में स्टोर करें।

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

उपरोक्त उदाहरण में ऐसा करने का कोई लाभ नहीं है, लेकिन यह आपको एक सम्मिलित मिश्रण के भीतर से मूल शैलियों को लपेटने की शक्ति देता है।