Ընտրիչների ժառանգումը 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-ի։