SASS တွင် @extend နှင့် selector များ၏ အစဉ်လိုက်

@extend directive ကို selector များ၏ အစဉ်လိုက်ကို ချဲ့ထွင်ရန် အသုံးပြုနိုင်ပါသည်။ အောက်ပါ နမူနာကို ကြည့်ပါ။

နမူနာတစ်ခုကို သုံးသပ်ကြည့်ပါ။

#menu .navbar {
	@extend div;
}
div {
	color: #0a0a4b;
	&:hover {
		text-decoration: underline;
	}
}

Compile ပြုလုပ်ပြီးနောက် အောက်ပါ code ကို ရရှိပါမည်။

div, #menu .navbar {
	color: #0a0a4b;
}
div:hover, #menu .navbar:hover {
	text-decoration: underline;
}

အောက်ပါ code ၏ compile ရလဒ်သည် အဘယ်နည်း ရှင်းပြပါ။

button {
	@extend link;
}

link {
	font-size: 10px;
	&:active {
		color: #f0ffff;
		background-color: #110c63;
	}
}

အောက်ပါ code ၏ compile ရလဒ်သည် အဘယ်နည်း ရှင်းပြပါ။

.main-text {
	font-family: Impact;
}

button {
	@extend link;
	font-size: 10px;
	@extend .main-text;
}

link {
	&:hover {
		color: #333333;
		background-color: #6d6d6d;
	}
}