सैस @extend और इन्हेरिटेंस

Sass @extend निर्देश

@extend इस निर्देश से आप एक सेट ऑफ शैली गुणों को एक चयनकर्ता से दूसरे चयनकर्ता तक साझा कर सकते हैं。

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

सबसे पहले, इस Sass नमूने में बटन को एक बुनियादी शैली बनाया जाता है (यह शैली अधिकांश बटनों के लिए उपयोग की जाएगी)। फिर, "Report" बटन के लिए एक शैली बनाई जाती है और "Submit" बटन के लिए एक शैली बनाई जाती है। "Report" और "Submit" बटन दोनों @extend निर्देश के द्वारा @extend इस निर्देश के द्वारा .button-basic वर्ग की सभी CSS गुण उद्धारित होती हैं। इसके अलावा, वे अपने रंगों को भी परिभाषित करते हैं:

SCSS व्याकरण:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

कम्पाइल के बाद, CSS इस तरह दिखेगा:

CSS आउटपुट:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

इसका उपयोग करके @extend आदेश, आपको एचटीएमएल कोड के एलिमेंटों के लिए कई क्लासें सूचीबद्ध नहीं करना होता, उदाहरण के लिए: <button class="button-basic button-report">रिपोर्ट करें</button>।आपको केवल .button-report को सूचीबद्ध करने पर दो शैलीगुण प्राप्त होंगे।

@extend आदेश, आपके सैस कोड को बहुत ही ड्राई (DRY) रखने मदद करते हैं。