SASS ရှိ ဒြပ်စင် selector များ တိုးချဲ့ခြင်း

@extend ညွှန်ကြားချက်ကို အသုံးပြုခြင်းသည် class selector များတွင်သာ ကန့်သတ်ထားခြင်းမဟုတ်ပါ။ မည်သည့် selector ကိုမဆို၊ ပင်ကိုယ် element တစ်ခုတည်းကိုပင် တိုးချဲ့နိုင်ပါသည်။ ဥပမာတစ်ခုဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာတစ်ခုကို စဉ်းစားကြည့်ပါ။

.active-link {
	@extend a:active;
}
	
a:active {
	color: blue;
}

ပြန်လည်ပြင်ဆင်ခြင်း၏ ရလဒ်အနေဖြင့်၊ .active-link သည် a:active မှ color ဂုဏ်သတ္တိကို အမွေဆက်ခံသည်ကို ကျွန်ုပ်တို့ တွေ့မြင်ရပါမည်။

a:active, .active-link {
	color: blue;
}

အောက်ပါကုဒ်၏ ပြန်လည်ပြင်ဆင်ခြင်း ရလဒ်သည် အဘယ်နည်း ပြောပြပါ။

button {
	@extend .box:hover;
}
	
.box:hover {
	color: #14147e;
}

အောက်ပါကုဒ်၏ ပြန်လည်ပြင်ဆင်ခြင်း ရလဒ်သည် အဘယ်နည်း ပြောပြပါ။

button:active {
	@extend input:focus;
}

button:blur {
	@extend input:blur;
}

input:focus {
	color: #14147e;
	border-color: #b5b5d1;
}

input:blur {
	color: #040433;
	background-color: #87878f;
}