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

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

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

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

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

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

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

.personalWarning {
	border-width: 3px; 
}

बताएं कि निम्नलिखित कोड के कंपाइलेशन का परिणाम क्या होगा:

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

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

पिछले कार्य की शर्तों को इस प्रकार बदलें कि #product-card, #product से 500px के बराबर चौड़ाई इनहेरिट करे।