SASS में चयनकर्ता वंशानुक्रम

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

आइए एक उदाहरण देखें:

style.scss.warning {
  border: 1px solid;
  background-color: #ffd900;
}

.personalWarning {
  @extend .warning;
  border-width: 3px;
}

आइए अब कंपाइलेशन के परिणाम को देखें:

style.css.warning, .personalWarning {
  border: 1px solid;
  background-color: #ffd900; }

.personalWarning {
  border-width: 3px; 
}

styles.scss#product-card {
  color: #302f2f;
  font-family: 'Times New Roman', Times, serif;
}

#product-card-title {
  @extend #product-card;
  font-weight: 600px;
}